<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <script src="./js/arcmenus.js"></script>
    <script src="./js/vconsole.js"></script>
    <script src="./js/turf.js"></script>
    <script src="./js/mapbox-gl.js"></script>
    <script src="./js/map.js"></script>
    <script src="./js/pro4.js"></script>
    <script src="./js/myUtil.js"></script>
    <script src="./mock/data.js"></script>
    <script src="./js/moment.js"></script>
    <script src="./js//lnglatConvert.js"></script>
    <script src='qrc:///qtwebchannel/qwebchannel.js'></script>
    <script src="./js/my.js"></script>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./js/mapbox-gl.css">
    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>
    <script src="./I18n/index.js"></script>
    <style>
        #main {
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 10000;

        }


        .mapboxgl-ctrl .mapboxgl-ctrl-logo {
            display: none;
        }

        .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
            position: absolute;
            right: 5px;
            top: 65px
        }

        .member {
            background-color: white !important;

            padding-left: 2px;
            padding-right: 2px;
            transform: translateY(-5px);
        }

        .memberBox {
            text-align: center;

        }

        .member .text {
            color: black;
            font-size: 12px !important;
        }

        .hostileLabel {
            color: black;
            background: white;
            font-size: 12px !important;
            font-weight: 200 !important;
            padding-left: 4px;
            padding-right: 4px;
        }

        .tempHostileLabel {
            display: none;
        }

        .rightMain {
            left: 192px !important;
        }

        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: inline-block;
        }

        .report {

            width: 20px;
            height: 20px;

        }
    </style>
</head>

<body>
    <div id="app">

        <div class="fold" @click="foldShow"><img style="width: 67px;height: 61px;" :src="foldImg" alt=""></div>
        <div class="my-menu" v-cloak v-if="isshow">
            <el-button icon="el-icon-my-mark el-icon-my-point" style="width: 72px; height: 30px" round
                @click="markerController" :class="selecedIndex==0?'selected':''">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-polyline" style="width: 72px; height: 30px" round
                :class="selecedIndex==1?'selected':''" @click="lineController">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-hostile" style="width: 72px; height: 30px" round
                :class="selecedIndex==5?'selected':''" @click="hostileController">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-tasklist" style="width: 72px; height: 30px" round
                :class="selecedIndex==2?'selected':''" @click='taskController'>
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-track" style="width: 72px; height: 30px" round
                :class="selecedIndex==3?'selected':''" @click="trackController">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-node" style="width: 72px; height: 30px" round
                :class="selecedIndex==4?'selected':''" @click="nodeController">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-fire" style="width: 72px; height: 30px" round
                @click="fireTaskController" :class="selecedIndex==6?'selected':''">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-flyMap" style="width: 72px; height: 30px" round
                @click="toFlymap" :class="selecedIndex==7?'selected':''">
            </el-button>
            <el-button icon="el-icon-my-mark el-icon-my-pen" style="width: 72px; height: 30px" round
                @click="createGeogence" :class="selecedIndex==8?'selected':''">
            </el-button>
        </div>
        <div id="allmap" style="width: 100vw; height: 100vh"></div>
        <el-dialog :visible.sync="dialogVisible" :width="language=='en'?'310px':'270px'" :modal="false" center
            :close-on-click-modal='false' :title="dialogTitle" :show-close='dialogType=="geogence"?false:true'
            :class="{'hostileDialog':dialogType=='hostile','enDialog':language=='en'}" :append-to-body="false">
            <div class="marker-box" v-if="dialogType=='mark'||dialogType=='polyline'">
                <el-form :model="form">
                    <el-form-item :label="I18n(language,'task')" label-width="38px">
                        <el-select v-model="form.task">
                            <el-option v-for="item in taskOptions" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'color')" class="colorPicker" label-width="38px"
                        v-if="dialogType=='polyline'">
                        <span class="colorPickerBox" v-for="(i,index) in predefineColors" :style="{background:i}"
                            @click="colorChange(i,index)">
                    </el-form-item>
                    <el-form-item label-width="0px" v-show="dialogType=='mark'">
                        <span style="display: inline-block;width:38px;">{{I18n(language,'coordinate')}}</span>
                        <el-input style="width: 87px;" v-model="form.mercatorAbscissa" @blur="setMarkerGeo"></el-input>
                        <el-input style="width: 87px;" v-model="form.mercatorOrdinate" @blur="setMarkerGeo"></el-input>
                    </el-form-item>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth">
                        <span class='el-form-item__label'
                            style="margin-left: -44px;">{{I18n(language,'designate')}}</span>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-tree ref="tree" :data="treeData" show-checkbox node-key="meshId" :default-expand-all="true"
                            :default-checked-keys="defaultCheckedkeys" :props="defaultProps">
                        </el-tree>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <div class="el-form-item__label" style="width: 52px;text-align: left;">
                            {{I18n(language,'remark')}}</div>

                        <el-input class="remark" type="textarea" :rows="3" v-model="form.remark" maxlength="30"
                            show-word-limit>
                        </el-input>


                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="success" :class="{'en-confirm':language=='en'}" round
                        @click="drawPost('publish')">{{I18n(language,'publish')}}</el-button>
                    <el-button type="danger" :class="{'en-confirm':language=='en'}" round
                        @click="drawPost('delete')">{{I18n(language,'delete')}}</el-button>
                </div>
            </div>
            <div v-if="dialogType=='track'">
                <div class="my-card" style="height: 40px;">
                    <div style="width: 120px;">

                        <span>{{I18n(language,'openAll')}}</span>
                    </div>
                    <div>

                        <el-switch v-model="allTrackClose" active-color="#13ce66" @change="allTrackSwitch"
                            inactive-color="#7b8086">
                        </el-switch>
                    </div>
                </div>
                <div class="my-card" v-for="item in trackManager.cards">

                    <div style="width: 120px;" @click="setCenter(item.geo[0],$event)">
                        <div>
                            <span>{{item.groupName}}</span>
                        </div>
                        <div>
                            <span>{{item.deviceName}}</span>
                        </div>
                    </div>
                    <div>
                        <el-switch style="margin: 10px auto;" v-model="item.switch" active-color="#49B580"
                            inactive-color="#7b8086" @change="trackSwitch(item.switch,item.deviceId,item.geo)">
                    </div>
                </div>
            </div>
            <div v-if="dialogType=='task'">
                <div class="my-card card" v-for="(item,index) in taskManager.cards"
                    @click="toDetail($event,index,item)">
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'task')}}:</span>
                            <span>{{item.name}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'markerType')}}:</span>
                            <span>
                                {{tasktypeConvert(item.taskType)}}
                            </span>
                        </span>

                    </div>
                    <div class="detail-card" v-if="item.members.length>0">
                        <span>
                            <span>{{I18n(language,'appointees')}}:</span>
                            <span>{{item.members.length}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'coordinate')}}:</span>
                            <span>{{item.list[0].longitude+','+item.list[0].latitude}}</span>
                        </span>

                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'creationTime')}}:</span>
                            <span>{{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </span>

                    </div>
                    <div class="detail-card" v-if="item.finalTime">
                        <span>
                            <span>{{I18n(language,'countdown')}}:</span>
                            <span>{{computerTimediff(item.finalTime)}}</span>
                        </span>
                    </div>
                    <div class="detail-card" style="display: flex;align-items:center;justify-content: space-between;">
                        <img style="width:16px;height: 23px;" src="./js/images/my/47.png" alt=""
                            @click="setCenter(item.list[0],$event)">
                        <el-button round type="danger">{{I18n(language,'close')}}</el-button>
                    </div>
                </div>
            </div>
            <div v-if="dialogType=='detail'">

                <div v-if="detailManager.data.taskType==1||detailManager.data.taskType==2">
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'task')}}:</span>
                            <span>{{detailManager.data.name}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskType')}}:</span>
                            <span>{{tasktypeConvert(detailManager.data.taskMode)}}</span>
                        </span>

                    </div>
                    <div class="detail-card" v-if="detailManager.data.taskType==1">
                        <span>
                            <span>{{I18n(language,'coordinate')}}:</span>
                            <span>{{detailManager.data.geo}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'appointees')}}:</span>
                            <span>{{detailManager.data.memberNum}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'member')}}:</span>
                            <el-tooltip :content="detailManager.data.memberDetail" placement="bottom">
                                <span class="detail-card-text">{{detailManager.data.memberDetail}}</span>
                            </el-tooltip>
                        </span>


                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'deliveryTime')}}:</span>
                            <span>{{detailManager.data.createTime}}</span>
                        </span>
                    </div>
                    <div class="detail-card detail-remark">
                        <span style="display: inline-block;height: 100%;">
                            <span>{{I18n(language,'remark')}}:</span>
                            <span>{{detailManager.data.remark}}</span>

                        </span>

                    </div>
                </div>
                <div v-if="detailManager.data.taskType!=1&&detailManager.data.taskType!=2">
                    <el-radio-group v-model="toggleDetail" style="margin-bottom: 10px;" @change="tabClick"
                        class="my-radio-group">
                        <el-radio-button label="0">{{I18n(language,'details')}}</el-radio-button>
                        <el-radio-button label="1">{{I18n(language,'history')}}</el-radio-button>
                    </el-radio-group>
                    <div v-if="toggleDetail==0">
                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'task')}}:</span>
                                <span>{{detailManager.data.name}}</span>
                            </span>
                        </div>
                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'taskType')}}:</span><span>{{detailManager.data.taskMode}}</span>
                            </span>
                        </div>
                        <div class="detail-card">
                            <span><span>{{I18n(language,'weaponCategory')}}:</span><span>{{detailManager.data.category}}</span></span>
                        </div>
                        <div class="detail-card" v-if="detailManager.data.weaponType">
                            <span>
                                <span>{{I18n(language,'weaponType')}}:</span><span>{{detailManager.data.weaponType}}</span>
                            </span>
                        </div>
                        <!--  <div class="detail-card"><span>炮目距离:</span><span>{{detailManager.data.distance}}</span></div> -->
                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'safetylimit')}}:</span><span>{{detailManager.data.safeRange}}</span>
                            </span>
                        </div>

                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'coordinate')}}</span>
                                <span>{{detailManager.data.abscissa}}, {{detailManager.data.ordinate}}</span>
                            </span>
                        </div>

                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'elevation')}}:</span><span>{{detailManager.data.elevation}}</span>
                            </span>
                        </div>
                        <div class="detail-card">
                            <span><span>{{I18n(language,'targetProperty')}}:</span>
                                <span>{{detailManager.data.property}}</span></span>
                        </div>
                        <div class="detail-card" v-if="detailManager.data.propertyCode==1017">
                            <span>
                                <span>{{I18n(language,'customProperty')}}:</span><span>{{detailManager.data.customProperty}}</span>
                            </span>
                        </div>
                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'targetcircle')}}:</span>
                                <span>{{I18n(language,'level')}}{{detailManager.data.targetCircleHorizontally}}</span>
                                <span>{{I18n(language,'perpendicularity')}}{{detailManager.data.targetCircleVertical}}</span>
                            </span>
                        </div>
                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'targetstate')}}:</span><span>{{detailManager.data.targetStatus}}</span>
                            </span>
                        </div>
                        <div class="detail-card" v-if="detailManager.data.targetStatusCode!=1001">
                            <span>
                                <span>{{I18n(language,'motionMicron')}}:</span>
                                <span>{{detailManager.data.preMil}} {{detailManager.data.milSuffix}}</span>
                            </span>

                        </div>
                        <div class="detail-card" v-if="detailManager.data.targetStatusCode!=1001">
                            <span>
                                <span>{{I18n(language,'velocityMotion')}}:</span><span>{{detailManager.data.speed}}</span>
                            </span>
                        </div>
                        <div class="detail-card">
                            <span>
                                <span>{{I18n(language,'creationTime')}}:</span><span>{{detailManager.data.createTime}}</span>
                            </span>
                        </div>
                    </div>
                    <div v-if="toggleDetail==1">
                        <div v-for="item in history">
                            <div class="history-card">
                                <span>
                                    <span>{{I18n(language,'tragetDistance')}}:</span>
                                    <span>{{item.blastDistance}}</span>
                                </span>

                            </div>
                            <div class="history-card">
                                <span>
                                    <span>{{I18n(language,'targetBearing')}}:</span>
                                    <span>{{item.blastPreMil}} ,{{item.blastMilSuffix}}</span>
                                </span>
                            </div>
                            <div class="history-card">
                                <span>
                                    <span>{{I18n(language,'creationTime')}}</span>
                                    <span>{{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                </span>

                            </div>
                        </div>

                    </div>

                </div>
                <el-button type="primary" round style="margin-top: 20px;"
                    @click="back">{{I18n(language,'back')}}</el-button>
            </div>
            <div v-if="dialogType=='node'">
                <div class="my-card" style="height: 40px;">
                    <div style="width: 120px;">
                        <span>{{I18n(language,'openAll')}}</span>
                    </div>

                    <div>

                        <el-switch v-model="allNodeHidden" active-color="#13ce66" @change="allHidden"
                            inactive-color="#7b8086">
                        </el-switch>
                    </div>
                </div>
                <div class="my-card" v-for="item in nodeHiddenManager.cards">
                    <div style="width: 120px;" @click="setCenter(item.geo[0],$event)">
                        <div>
                            <span>{{item.groupName}}</span>
                        </div>
                        <div>
                            <span class="card-name">{{item.deviceName}}</span>
                        </div>

                    </div>


                    <div>

                        <el-switch style="margin: 10px auto;" v-model="item.switch" active-color="#49B580"
                            inactive-color="#7b8086" @change="nodeSwitch(item.switch,item.deviceId)">
                    </div>
                </div>
            </div>
            <div v-if="dialogType=='hostile'">
                <div>
                    <div class="hostile" style="display: flex;justify-content: space-between;">
                        <img :class="selectedImg==0?'selectedImg':''" src="./js/images/hostile/1.png"
                            @click="setMarkerIcon(0)" title="">
                        <img class="hostileImg" :class="selectedImg==1?'selectedImg':''" src="./js/images/hostile/2.png"
                            @click="setMarkerIcon(1)">
                        <img class="hostileImg" :class="selectedImg==2?'selectedImg':''" src="./js/images/hostile/3.png"
                            @click="setMarkerIcon(2)">
                        <img class="hostileImg" src="./js/images/hostile/4.png" :class="selectedImg==3?'selectedImg':''"
                            @click="setMarkerIcon(3)">

                    </div>
                    <div>
                        <div class="hostileIconText" style="line-height: 38px;">{{I18n(language,'derivedIcon')}}</div>
                        <el-image style="width:25%;box-sizing: border-box;border: 1px solid transparent;"
                            :src="`./js/images/hostile/${item}.png`" v-for="item in subImgList"
                            @click="selectedImg=item;labelType=item;" :class="{'selectedBox':selectedImg==item}"
                            :key="'image'+item"></el-image>
                    </div>
                </div>
            </div>
            <div v-if="dialogType=='describe'">
                <el-form>
                    <el-form-item label-width="0px">
                        <div class="el-form-item__label" style="width:100px;text-align: left;">
                            {{I18n(language,'description')}}
                        </div>
                        <el-input class="des" type="textarea" :rows="2" maxlength="20" show-word-limit
                            v-model="labelDes" @keydown.enter.native="enterEvent($event)">
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="mini" @click="updateDes(0)">{{I18n(language,'cancel')}}</el-button>
                <el-button type="primary" size="mini" @click="updateDes(1)"
                    :class="{'en-confirm':language=='en'}">{{I18n(language,'confirm')}}</el-button>
            </div>
            <div v-if="dialogType=='fireTask'">
                {{I18n(language,'fireGuidance')}}
            </div>

            <div v-if="dialogType==0">
                <el-form :model="fireForm">
                    <el-form-item :label="I18n(language,'taskName')" :label-width="filrFormLabelWidth">
                        <el-input v-model="fireForm.name"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'taskType')" :label-width="filrFormLabelWidth">
                        <el-select v-model="fireForm.taskMode" size="mini">
                            <el-option v-for="item in taskTypeList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'weaponCategory')" :label-width="filrFormLabelWidth">
                        <el-select v-model="fireForm.category" size="mini" @change="categoryChange">
                            <el-option v-for="item in categorys" :key="item+'类别'" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'weaponType')" :label-width="filrFormLabelWidth"
                        v-if="fireForm.weaponType">

                        <el-select v-model="fireForm.weaponType" size="mini">
                            <el-option v-for="item in weaponTypeOption" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!-- <el-form-item label="炮目距离" :label-width="formLabelWidth"> -->
                    <!-- <el-input v-model="fireForm.distance" size="mini"></el-input> -->
                    <!-- </el-form-item> -->
                    <el-form-item :label="I18n(language,'safetylimit')" :label-width="filrFormLabelWidth">
                        <el-input v-model="fireForm.safeRange" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'coordinate')" :label-width="filrFormLabelWidth">
                        <el-input v-model="fireForm.abscissa" size="mini"></el-input>
                        <el-input v-model="fireForm.ordinate" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'elevation')" :label-width="filrFormLabelWidth">
                        <el-input v-model="fireForm.elevation" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'targetProperty')" :label-width="filrFormLabelWidth">
                        <el-select v-model="fireForm.property" size="mini" @change="propertyChange">
                            <el-option v-for="item in targetProperties" :key="item.code" :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="0" v-if="fireForm.propertyCode==1017">
                        <div class="el-form-item__label" style="width: 90px;text-align: left;color: white;">自定义性质</div>
                        <el-input class="remark" type="textarea" :rows="3" v-model="fireForm.customProperty"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'targetcircle')" :label-width="filrFormLabelWidth">
                        <el-input v-model="fireForm.targetCircleHorizontally" size="mini"
                            class="my-time-input"></el-input>
                        <el-input v-model="fireForm.targetCircleVertical" size="mini" class="my-time-input"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'targetstate')" :label-width="filrFormLabelWidth">
                        <el-select v-model="fireForm.targetStatus" size="mini" @change="targetStatusChange">
                            <el-option v-for="item in targetStatusList" :key="item.code" :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item :label="I18n(language,'motionMicron')" :label-width="filrFormLabelWidth"
                        v-if="fireForm.targetStatusCode!=1001">
                        <el-input v-model="fireForm.preMil" size="mini" class="my-time-input"></el-input>
                        <el-input v-model="fireForm.milSuffix" size="mini" class="my-time-input"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'velocityMotion')" :label-width="filrFormLabelWidth"
                        v-if="fireForm.targetStatusCode!=1001">
                        <el-input v-model="fireForm.speed" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'estimatedTime')" label-width="80px">

                        <el-input v-model="countdown" size="mini" class="my-time-input1"></el-input>
                        <el-select v-model="countdownUnit" size="mini" class="my-time-input2">
                            <el-option v-for="item in countdownUnitOptions" :key="item.value+item.label"
                                :label="I18n(language,item.label)" :value="item.value">
                            </el-option>
                        </el-select>

                    </el-form-item>
                </el-form>
                <div class="btns">
                    <el-button type="primary" size="samll" @click="updateFireGuidance"
                        :class="{'en-confirm':language=='en'}" round>{{I18n(language,'confirm')}}</el-button>
                    <el-button type="primary" size="samll" round
                        @click="rejectFireGuidance">{{I18n(language,'turnDown')}}</el-button>
                </div>
            </div>
            <div v-if="dialogType==-1">
                <div class="my-card card" v-for="(item,index) in fireTaskList" @click="toFireDetail($event,index,item)">
                    <div class="detail-card long-card">
                        <span>
                            <span>{{I18n(language,'weaponCategory')}}:</span>
                            <span>{{item.category}}</span>
                        </span>
                    </div>
                    <div class="detail-card long-card">
                        <span>
                            <span>{{I18n(language,'applicant')}}:</span>
                            <span>{{item.deviceName}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'coordinate')}}:</span>
                            <span>{{item.abscissa}}, {{item.ordinate}}</span>
                        </span>
                    </div>
                    <div class="detail-card long-card">
                        <span>
                            <span>{{I18n(language,'creationTime')}}:</span>
                            <span>{{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </span>

                    </div>

                    <div class="detail-card" style="display: flex;align-items: center;justify-content: space-between;">
                        <span>
                            <span>{{I18n(language,'status')}}:</span>
                            <span>{{fireStatusConvert(item.status)}}</span>
                        </span>
                        <!--  <el-button type="primary" round size="small">毁伤评估</el-button> -->
                        <img style="width:16px;height: 23px;" src="./js/images/my/47.png" alt=""
                            @click="setCenter({longitude:item.longitude,latitude:item.latitude},$event)">
                    </div>
                </div>
            </div>
            <div v-if="dialogType==3">
                <el-form :model="fireForm">
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskName')}}</span>
                            <span>{{fireForm.name}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskType')}}</span>
                            <span> {{fireForm.taskMode}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'weaponCategory')}}</span>
                            <span> {{fireForm.category}}</span>
                        </span>

                    </div>

                    <div class="detail-card" v-if="fireForm.weaponType">
                        <span>
                            <span>{{I18n(language,'weaponType')}}</span>
                            <span>{{fireForm.weaponType}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'safetylimit')}}</span>
                            <span> {{fireForm.safeRange}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'coordinate')}}</span>
                            <span> {{fireForm.abscissa}}, {{fireForm.ordinate}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'elevation')}}</span>
                            <span> {{fireForm.elevation}}</span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetProperty')}}</span>
                            <span>{{fireForm.property}}</span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetcircle')}}</span>
                            <span>{{fireForm.targetCircleHorizontally}}
                                {{fireForm.targetCircleVertical}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetstate')}}</span>
                            <span> {{fireForm.targetStatus}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card" v-if="fireForm.targetStatusCode!=1001">
                        <span>
                            <span>{{I18n(language,'motionMicron')}}</span>
                            <span> {{fireForm.preMil}},{{fireForm.milSuffix}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card" v-if="fireForm.targetStatusCode!=1001">
                        <span>
                            <span>{{I18n(language,'velocityMotion')}}</span>
                            <span> {{fireForm.speed}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'creationTime')}}</span>
                            <span>{{moment(fireForm.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                            </span>
                        </span>
                    </div>
                </el-form>
                <div class="btns">
                    <el-button type="primary" size="samll" :class="{'en-confirm':language=='en'}"
                        @click="dialogVisible=false" round>{{I18n(language,'confirm')}}</el-button>
                    <el-button type="primary" size="samll" round
                        @click="dialogType=-1">{{I18n(language,'back')}}</el-button>
                </div>
            </div>
            <div v-if="dialogType==6">
                <el-form :model="fireForm">
                    <div class="detail-card">
                        <span>
                            <span style="width:100px">{{I18n(language,'tragetDistance')}}</span>
                            <span>{{fireForm.blastDistance}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span style="width:140px">{{I18n(language,'targetBearing')}}</span>
                            <span> {{fireForm.blastPreMil}},{{fireForm.blastMilSuffix}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskName')}}</span>
                            <span> {{fireForm.name}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card">

                        <span>
                            <span>{{I18n(language,'weaponCategory')}}</span>
                            <span> {{fireForm.category}}
                            </span>
                        </span>

                    </div>

                    <div class="detail-card" v-if="fireForm.weaponType">

                        <span>
                            <span>{{I18n(language,'weaponType')}}</span>
                            <span> {{fireForm.weaponType}}
                            </span>
                        </span>

                    </div>


                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'safetylimit')}}</span>
                            <span> {{fireForm.safeRange}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'coordinate')}}</span>
                            <span> {{fireForm.abscissa}}, {{fireForm.ordinate}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'elevation')}}</span>
                            <span> {{fireForm.elevation}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetProperty')}}</span>
                            <span> {{fireForm.property}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetcircle')}}</span>
                            <span> {{fireForm.targetCircleHorizontally}}
                                {{fireForm.targetCircleVertical}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetstate')}}</span>
                            <span> {{fireForm.targetStatus}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'creationTime')}}</span>
                            <span> {{moment(fireForm.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                            </span>
                        </span>
                    </div>

                </el-form>
                <div class="btns">
                    <el-button type="primary" size="samll" round @click="dialogVisible=false"
                        :class="{'en-confirm':language=='en'}">{{I18n(language,'confirm')}}</el-button>
                    <el-button type="primary" size="samll" round
                        @click="dialogType=-1">{{I18n(language,'back')}}</el-button>
                </div>
            </div>
            <div v-if="dialogType==4">
                <el-form :model="fireForm" class="my-form">
                    <el-form-item :label="I18n(language,'tragetDistance')" label-width="100">
                        <el-input v-model="fireForm.blastDistance" size="small" class="my-time-input"></el-input>
                    </el-form-item>
                    <el-form-item label="" label-width="100">
                        <div style="display: flex;align-items: center;">
                            <el-tooltip class="item" style="display: inline-block;" content="炸点在目标方位(密位)"
                                placement="bottom">
                                <span class="label-name">{{I18n(language,'targetBearing')}}</span>
                            </el-tooltip>
                            <el-input v-model="fireForm.blastPreMil" class="my-pos-input"></el-input>
                            <el-input v-model="fireForm.blastMilSuffix" class="my-pos-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'estimatedTime')" label-width="80px">
                        <el-input v-model="countdown" size="mini" class="my-time-input1"></el-input>
                        <el-select v-model="countdownUnit" size="mini" class="my-time-input">
                            <el-option v-for="item in countdownUnitOptions" :key="item.value+item.label"
                                :label="I18n(language,item.label)" :value="item.value">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskName')}}</span>
                            <span>{{fireForm.name}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'weaponCategory')}}</span>
                            <span> {{fireForm.category}}</span>
                        </span>

                    </div>
                    <div class="detail-card" v-if="fireForm.weaponType">
                        <span>
                            <span>{{I18n(language,'weaponType')}}</span>
                            <span>{{fireForm.weaponType}}</span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'safetylimit')}}</span>
                            <span> {{fireForm.safeRange}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'coordinate')}}</span>
                            <span>{{fireForm.abscissa}}, {{fireForm.ordinate}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'elevation')}}</span>
                            <span> {{fireForm.elevation}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetProperty')}}</span>
                            <span> {{fireForm.property}}
                            </span>
                        </span>
                    </div>

                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetstate')}}</span>
                            <span> {{fireForm.targetStatus}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetcircle')}}</span>
                            <span> {{fireForm.targetCircleHorizontally}}
                                {{fireForm.targetCircleVertical}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'creationTime')}}</span>
                            <span> {{moment(fireForm.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                            </span>
                        </span>
                    </div>

                </el-form>
                <div class="btns">
                    <el-button type="primary" size="small" round @click="blowAmendConfirm"
                        :class="{'en-confirm':language=='en'}">{{I18n(language,'confirm')}}</el-button>
                    <el-button type="primary" size="small" round
                        @click="dialogType=-1">{{I18n(language,'back')}}</el-button>

                </div>
            </div>
            <div v-if="dialogType==5">
                <el-form :model="fireForm">
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskName')}}</span>
                            <span>{{fireForm.name}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'taskType')}}</span>
                            <span> {{fireForm.taskMode}}</span>
                        </span>

                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'weaponCategory')}}</span>
                            <span> {{fireForm.category}}</span>
                        </span>

                    </div>
                    <div class="detail-card" v-if="fireForm.weaponType">
                        <span>
                            <span>{{I18n(language,'weaponType')}}</span>
                            <span>{{fireForm.weaponType}}</span>
                        </span>
                    </div>


                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'safetylimit')}}</span>
                            <span> {{fireForm.safeRange}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'coordinate')}}</span>
                            <span> {{fireForm.abscissa}}, {{fireForm.ordinate}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'elevation')}}</span>
                            <span> {{fireForm.elevation}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetProperty')}}</span>
                            <span>{{fireForm.property}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetcircle')}}</span>
                            <span>{{fireForm.targetCircleHorizontally}}
                                {{fireForm.targetCircleVertical}}</span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'targetstate')}}</span>
                            <span> {{fireForm.targetStatus}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card" v-if="fireForm.targetStatusCode!=1001">
                        <span>
                            <span>{{I18n(language,'motionMicron')}}</span>
                            <span> {{fireForm.preMil}},{{fireForm.milSuffix}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card" v-if="fireForm.targetStatusCode!=1001">
                        <span>
                            <span>{{I18n(language,'velocityMotion')}}</span>
                            <span> {{fireForm.speed}}
                            </span>
                        </span>
                    </div>
                    <div class="detail-card">
                        <span>
                            <span>{{I18n(language,'creationTime')}}</span>
                            <span>{{moment(fireForm.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                            </span>
                        </span>
                    </div>
                </el-form>
                <div class="btns">
                    <el-button type="primary" @click="dialogVisible=false" round
                        :class="{'en-confirm':language=='en'}">{{I18n(language,'confirm')}}</el-button>
                    <el-button type="primary" round @click="dialogType=-1">{{I18n(language,'back')}}</el-button>

                </div>
            </div>
            <!--  弹药详情 -->
            <div v-if="dialogType=='ammoDetail'">

                <el-form :model="ammoDetail">
                    <el-form-item :label="I18n(language,'informant')+':'">
                        <span>{{ammoDetail.meshName}}</span>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'confirm')+':'">
                        <span>{{ammoStatusConvert(ammoDetail.status)}}</span>
                        <el-button type="primary " size="mini"
                            @click="closeReporter(2)">{{I18n(language,'closeReport')}}</el-button>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'remark')">
                        <el-input class="remark" type="textarea" :rows="3" v-model="ammoDetail.remark" maxlength="40"
                            show-word-limit>
                        </el-input>
                    </el-form-item>

                </el-form>

            </div>
            <!--  战斗力详情 -->
            <div v-if="dialogType=='battleDetail'">
                <el-form :model="battleDetail">
                    <el-form-item :label="I18n(language,'informant')+':'">
                        <span>{{battleDetail.meshName}}</span>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'combatstatus')+':'">
                        <span>{{battleStatusConvert(battleDetail.status)}}</span>
                        <el-button type="primary" size="mini"
                            @click="closeReporter(1)">{{I18n(language,'close')}}</el-button>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'remark')">
                        <el-input class="remark" type="textarea" :rows="3" v-model="battleDetail.remark" maxlength="40"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                </el-form>

            </div>
            <div v-if="dialogType=='geogence'">
                <el-form :model="geogenceInfor">
                    <el-form-item :label="I18n(language,'drawingtype')+':'">
                        <span>{{geoTypeConvertText(geogenceInfor.geoType)}}</span>
                    </el-form-item>
                    <el-form-item :label="I18n(language,'color')+':'" class="colorPicker" label-width="44px">
                        <span class="colorPickerBox" v-for="(i,index) in predefineColors" :style="{background:i}"
                            @click="colorChange1(i,index)">
                    </el-form-item>
                    <el-form-item :label="I18n(language,'alarmType')+':'">

                        <el-select v-model="geogenceInfor.mode" style="width: 170px;margin-left: 3px;">
                            <el-option v-for="item in warningModeList" :key="item.label"
                                :label="I18n(language,item.label)" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" size="mini" @click="createGeogenceConfirm(1)"
                        :class="{'en-confirm':language=='en'}">{{I18n(language,'confirm')}}</el-button>
                    <el-button type="primary" size="mini" @click="createGeogenceConfirm(0)"
                        :class="{'en-confirm':language=='en'}">{{I18n(language,'cancel')}}</el-button>
                </el-form>

            </div>
        </el-dialog>
        <div id="main">
            <canvas id="canvasmain" width="100" height="100"></canvas>
        </div>

        <div id="inPicture" :class="{'rightMain':!myInforShow}">

        </div>
        <div v-cloak class="resetInpicture" @click="resetPictureView" :class="{'rightReset':!myInforShow}"
            v-if="showResetIcon">
            <img src="./js/images/my/reset.png" alt="">
        </div>
        <!-- 个人信息 -->
        <div v-cloak class="myInfor" v-show="myInforShow">
            <div class="inforItem">
                <span>{{userName}}:</span>
                <span>{{myInfor.name}}</span>
            </div>
            <div class="inforItem">
                <span>{{myInfor.lng}}</span>
                <span>{{myInfor.lat}}</span>
            </div>
        </div>
    </div>
</body>

</html>


<script type="text/javascript">
    // var vConsole = new window.VConsole();
    //路线任务css
    let lineCss = {
        strokeColor: "#D81E06",
        strokeWeight: 3,
        strokeOpacity: 2,
        strokeStyle: 'solid',
        // geodesic: true
    };
    let circleOptions = {
        //边线颜色
        strokeColor: 'red',
        //填充颜色
        strokeWeight: 2,
        fillColor: 'red',
        strokeOpacity: 0.5,
        fillOpacity: 0.3
    }
    let trackLineCss = {
        // 轨迹颜色  #13f2dc
        // strokeColor: "rgba(82, 152, 255)",
        strokeColor: "rgb(175, 84, 164)",
        strokeWeight: 2,
        strokeStyle: 'solid',
        // geodesic: true
    };

    let labelStyle = {
        transform: 'translateX(-50%)',
        border: '1px solid black',
        padding: '3px',
        fontSize: '12px !important',
        positon: 'relative'
    }
    let menuStatus=false;
    let vue = new Vue({
        el: '#app',
        data: function () {
            return {
                map: {},
                //绘画管理
                drawManager: {
                    //开启标点点形成的marker
                    marker: null,
                    //多节点开启起始点
                    lineStart: null,
                    //多任务节点overlay
                    polyLine: null,
                    //多节点mark实例
                    marks: [],
                    //多节点点列表
                    polyLinePoints: [],
                    totalDistance: 0,
                    //当前点击按钮类型  mark polyline  
                },
                publishManager: {
                    marker: false,
                    polyline: false,
                },

                isshow: true,
                dialogVisible: false,
                dialogTitle: "",
                //全部轨迹关闭
                allTrackClose: false,
                //全部轨节点隐藏
                allNodeHidden: false,
                //表单
                form: {
                    //经度
                    x: '',
                    //纬度
                    y: '',
                    /*  横坐标 */
                    mercatorAbscissa: '',
                    /* 纵坐标 */
                    mercatorOrdinate: '',
                    //备注
                    remark: '',
                    //任务名称
                    task: '',
                },
                //表单label宽度
                formLabelWidth: '42px',
                filrFormLabelWidth: '80px',
                checkAll: true,
                userName: '',
                members: [],
                isIndeterminate: false,
                //运动轨迹
                trackManager: {
                    cards: [

                    ],
                    //轨迹开启信息
                    open: {
                    },
                },
                //任务清单

                taskManager: {
                    //任务列表
                    cards: [
                        {
                            "taskId": "dd",
                            "name": "侦查任务",
                            "taskType": 2,
                            "members": [
                                {
                                    "deviceId": 14345453453434,
                                    "deviceName": "张三"
                                },
                                {
                                    "deviceId": 1645462423656,
                                    "deviceName": "李四"
                                },
                                {
                                    "deviceId": 1534534535345435,
                                    "deviceName": "无人机"
                                },
                                {
                                    "deviceId": 135546565345,
                                    "deviceName": "无人车"
                                }
                            ],
                            "list": [
                                {
                                    "longitude": "112.87811",
                                    "latitude": "28.235415",
                                    "status": 0
                                },
                                {
                                    "longitude": "112.880522",
                                    "latitude": "28.235972",
                                    "status": 1
                                },
                                {
                                    "longitude": "112.879965",
                                    "latitude": "28.234913",
                                    "status": 1
                                }
                            ],
                            "createTime": 1411641720000,
                            "remark": "我啊"
                        },
                        {
                            "taskId": "ss",
                            "name": "打击任务",
                            "taskType": 1,
                            "members": [
                                {
                                    "deviceId": 14345453453434,
                                    "deviceName": "张三"
                                },
                                {
                                    "deviceId": 1645462423656,
                                    "deviceName": "李四"
                                },
                                {
                                    "deviceId": 1534534535345435,
                                    "deviceName": "无人机"
                                }
                            ],
                            "list": [
                                {
                                    "longitude": "112.880293",
                                    "latitude": "28.238138",
                                    "status": 1
                                }
                            ],
                            "createTime": 1411641720000,
                            "remark": "服哈哈哈哈"
                        }
                    ]
                },
                //任务类型下拉框
                taskOptions: [

                ],
                //详情管理
                detailManager: {
                    data: {
                        //任务名称

                    }
                },
                //节点隐藏
                nodeHiddenManager: {
                    cards: []
                },
                dialogType: 'ammoDetail',
                //历史
                history: [{
                    "blastDistance": 150,
                    "blastPreMil": "20",
                    "blastMilSuffix": "00",
                    "createTime": "2023-8-15 13:43:12"
                }],
                selecedIndex: null,
                warnMessage: null,
                color: 'rgb(216,30,6)',
                predefineColors: [
                    'rgb(216,30,6)',
                    'rgb(255,102,0)',
                    'rgb(18,150,219)',
                    'rgb(244,234,42)',
                    'rgb(26,250,41)',
                    'rgb(255,255,255)',
                    'rgb(216,30,6)',
                ],
                selectedImg: 0,
                //衍生图标列表
                subImgList: [],
                //敌我标记
                labelType: 1,
                //敌我标识 描述
                labelDes: '',
                menuClickInfo: {},
                menuHandelStatus: false,
                defaultProps: {
                    children: 'memberList',
                    label: 'meshName'
                },
                //指派给
                treeData: [{
                    meshId: 1,
                    meshName: '一级 1',
                    memberList: [{
                        meshId: 4,
                        meshName: '二级 1-1',
                        memberList: [{
                            meshId: 9,
                            meshName: '三级 1-1-1'
                        }, {
                            meshId: 10,
                            meshName: '三级 1-1-2'
                        }]
                    }]
                }, {
                    meshId: 2,
                    meshName: '一级 2',
                    memberList: [{
                        meshId: 5,
                        meshName: '二级 2-1'
                    }, {
                        meshId: 6,
                        meshName: '二级 2-2'
                    }]
                }, {
                    meshId: 3,
                    meshName: '一级 3',
                    memberList: [{
                        meshId: 7,
                        meshName: '二级 3-1'
                    }, {
                        meshId: 8,
                        meshName: '二级 3-2',
                        memberList: [{
                            meshId: 11,
                            meshName: '三级 3-2-1'
                        }, {
                            meshId: 12,
                            meshName: '三级 3-2-2'
                        }, {
                            meshId: 13,
                            meshName: '三级 3-2-3'
                        }]
                    }]
                }],
                //临时数据
                tempDataManager: {
                    memberInfo: [],
                    taskInfo: [],
                    fireTaskInfo: [],
                    geoFenceList: []
                },
                defaultCheckedkeys: [0],
                foldImg: './js/images/config1.png',
                //存放临时的任务绘制的overlay
                tempOverlay: [],
                mapContainer: {},
                //火力任务列表
                fireTaskList: [],
                dialogType: null,
                fireForm: {
                },
                //倒计时
                countdown: 60,
                countdownUnit: 1,
                countdownUnitOptions: [
                    {
                        value: 1,
                        label: "seconds"
                    },
                    {
                        value: 2,
                        label: 'minutes'
                    },
                    {
                        value: 3,
                        label: 'hour'
                    }
                ],
                /*  任务类型 */
                taskTypeList: [
                    "临时压制", "一般压制", "重点压制"
                ],
                /*  目标性质 */
                targetProperties: [{
                    "value": "集结步兵",
                    "code": 1001
                }, {
                    "value": "有生力量",
                    "code": 1002
                }, {
                    "value": "火力点",
                    "code": 1003
                }, {
                    "value": "自定义",
                    "code": 1017
                }],
                /*  目标状态 */
                targetStatusList: [],
                weapon: [],
                /*  武器类别 */
                categorys: [],
                /* 武器类型 */
                weaponTypeOption: [],
                toggleDetail: 0,
                //画中画
                picture: {
                    //地图
                    map: null,
                    //敌我标识信息列表
                    list: []
                },
                //战斗力详情
                battleDetail: {
                    status: '',
                    remark: '',
                    meshName: '',
                    meshId: ''
                },
                //弹药详情
                ammoDetail: {
                    status: '',
                    remark: '',
                    meshName: '',
                    meshId: ''
                },
                //个人信息展示
                myInforShow: true,
                myInfor: {
                    name: '',
                    lng: '',
                    lat: ''
                },
                //当前电台
                curMeshIp: '192.168.1.238',
                //当前cckID 
                curMeshID: '',
                selectdColorPickerIndex: -1,
                selectdColorPickerIndex1: -1,
                //点击前往航拍图按钮的经纬度信息
                toFlymapInfor: null,
                showResetIcon: false,
                //是不是重置引起的zoom事件
                pictureReseting: false,
                geogenceInfor: {
                    //核辐射
                    geoType: 0,
                    //颜色
                    color: 'rgb(216,30,6)',
                    //经度
                    longitude: "",
                    //纬度
                    latitude: "",
                    //告警类型 模式1不告警 模式2 范围内
                    mode: 1,
                    //透明度
                    opacity: 30,
                    //半径
                    radius: 0,
                    //进度
                    progress: -1,
                    circle: null,
                    marker: null,
                    //是否提交
                    status: false,


                },
                warningModeList: [
                    { value: 1, label: 'noalarm' },
                    { value: 2, label: 'withinscope' }
                ],
                draw: '',
                tempMarkerID: "",
                tempRouteID: "",
                startRouteMarker: '',
                endRouteMarker: '',
                tempGeogencesIDs: [], //核辐射圈存储
                tempWhiteGeogencesIDs: [], //白色核辐射圈存储
                pulishedTask: [],//已经发布的任务 {type：number}  1,2,3,4分别为单节点 多节点 敌我标识 核辐射
                pictureMarkers: new Map(),
                I18n,
                language: 'en',
                resetFlag: false
            }
        },
        methods: {
            //标记点初始化
            markerController() {
                this.offAllClick()
                this.dialogTitle = I18n(this.language, 'singleObjectiveTask');
                this.dialogType = 'mark';
                this.form.remark = ''
                this.map.on('click', this.markerClick)

                this.selecedIndex = 0;
                channel.objects.pythonBridge.noticeGetScoutTaskTypeInfo()

                setTimeout(() => {

                    this.getmembers()
                    setTimeout(() => {
                        channel.objects.pythonBridge.getScoutTaskTypeInfo(res => {
                            res = JSON.parse(res)

                            this.taskOptions = res;
                            this.form.task = res[0]
                            this.dialogVisible = true;
                        })

                    }, 120)
                }, 100)

            },
            //marker点击事件抽取
            markerClick(e) {
                let draw = this.draw;

                let { lng, lat } = e.lngLat;
                lng = lng.toFixed(6);
                lat = lat.toFixed(6);
                /* let geo = latLng2WebMercator2(lng, lat) */
                this.form.x = lng;
                this.form.y = lat;
                const EPSG_BD09 = '+proj=longlat +ellps=krass +towgs84=-54,-85,42,0,0,0,0 +no_defs';
                const EPSG_GUASS_KRUGER = '+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=38500000 +y_0=0 +ellps=krass +units=m +no_defs';
                let temp = this.proj4(EPSG_BD09, EPSG_GUASS_KRUGER, [lng * 1, lat * 1])
                //坐标系转换 转墨卡托
                this.form.mercatorAbscissa = parseInt(temp[0]);
                this.form.mercatorOrdinate = parseInt(temp[1]);
                if (!this.tempMarkerID) { //首次绘制
                    let meshId = this.generateId()
                    this.tempMarkerID = meshId;
                    let iconSize = [24, 24];
                    let markerInfo = {
                        meshId,
                        coordinates: [e.lngLat.lng, e.lngLat.lat],
                        icon: "./js/images/my/36.png",
                        iconSize,
                        remark: this.form.task
                    };
                    draw.addMarker(markerInfo);
                } else {
                    let meshId = this.tempMarkerID;
                    let coordinates = [e.lngLat.lng, e.lngLat.lat];
                    let updateInfo = { meshId, coordinates };
                    draw.updateMarker(updateInfo);
                }
            },
            //多节点初始化
            lineController() {
                this.form.remark = '';
                this.offAllClick();
                this.dialogTitle = I18n(this.language, 'route');
                this.selecedIndex = 1;
                this.dialogType = 'polyline';
                this.publishManager.polyline = false;
                channel.objects.pythonBridge.noticeGetScoutTaskTypeInfo()

                this.map.on('click', this.lineClick)
                if (!this.publishManager.polyline) {
                    // this.map.removeOverlay(this.drawManager.marker)
                    this.drawManager.marker = null;
                    this.form.x = '';
                    this.form.y = '';
                    this.form.mercatorAbscissa = ''
                    this.form.mercatorOrdinate = ''
                }
                this.getmembers()
                setTimeout(() => {
                    channel.objects.pythonBridge.getScoutTaskTypeInfo(res => {
                        res = JSON.parse(res)
                        this.taskOptions = res;
                        this.form.task = res[0]
                        this.dialogVisible = true;

                    })
                }, 200)

            },
            lineClick(e) {
                let id = '';
                let draw = this.draw;
                if (this.tempRouteID) { //已有route
                    id = this.tempRouteID;
                    let source = this.map.getSource('route');
                    if (source) {
                        let features = source._data.features;
                        let item = features.find(feature => {
                            return feature.id == id
                        })
                        var coordinates = item.geometry.coordinates
                    }

                    if (coordinates.length < 2) {

                        let icon = './js/images/my/66.png';
                        let iconSize = [24, 24]
                        let markerInfo = {
                            coordinates: [e.lngLat.lng, e.lngLat.lat],
                            icon,
                            iconSize,
                        };
                        let marker = draw.addMarker(markerInfo);

                        this.endRouteMarker = marker
                    } else {
                        this.endRouteMarker.setLngLat([e.lngLat.lng, e.lngLat.lat]);
                        this.endRouteMarker
                    }
                } else { //新生成
                    id = this.generateId()
                    this.tempRouteID = id;
                    let icon = './js/images/my/65.png';
                    let iconSize = [15, 15]
                    let markerInfo = {

                        coordinates: [e.lngLat.lng, e.lngLat.lat],
                        icon,
                        iconSize,
                    };
                    let marker = draw.addMarker(markerInfo);

                    this.startRouteMarker = marker
                }

                let info = {
                    id,
                    coordinates: [[e.lngLat.lng, e.lngLat.lat]],
                    color: this.color,
                };
                this.draw.updateRoute(info);
            },
            //轨迹点击
            trackController() {
                this.offAllClick()
                this.dialogTitle = I18n(this.language, 'motiontrajectory');
                this.selecedIndex = 3;
                this.dialogType = 'track';
                this.dialogVisible = true;
            },
            //任务清单点击
            taskController() {
                this.offAllClick()
                this.dialogTitle = I18n(this.language, 'taskList')
                this.selecedIndex = 2;
                this.dialogType = 'task';
                this.dialogVisible = true;


                if (this.dialogVisible) {
                    try {
                        //通知python同步服务端数据
                        channel.objects.pythonBridge.refreshTaskList()
                    } catch (error) {
                        console.warn(error)
                    }
                }
            },
            //节点隐藏点击
            nodeController() {
                this.offAllClick()
                this.dialogTitle = I18n(this.language, 'nodeHidding'),
                    this.selecedIndex = 4;
                this.dialogType = 'node';
                this.dialogVisible = true;

                this.getmembers()
            },
            //敌我标记控制
            hostileController() {
                this.offAllClick()
                this.dialogTitle = I18n(this.language, 'fireMark')
                this.selecedIndex = 5;
                this.dialogType = 'hostile';
                this.dialogVisible = true;
                this.map.on('click', this.enemyClick);

            },
            //发布或者删除 
            drawPost(type) {
                this.dialogVisible = false;
                switch (this.dialogType) {
                    case 'mark':
                        this.markPost(type)
                        break;
                    case 'polyline':
                        this.polyPost(type)
                        break;
                    default:
                        break;
                }

            },
            //标记点发布或者删除
            markPost(type) {
                let marker = this.draw.overlays.markers.get(this.tempMarkerID);

                if (type == 'delete') {
                    //删除临时绘制Marker
                    this.draw.removeMarker(this.tempMarkerID)

                    this.drawManager.marker = null;
                } else {

                    this.publishManager.marker = true;
                    //发布
                    if (marker) {
                        let param = {}
                        param.name = this.form.task;
                        param.taskType = 1;
                        param.list = [{
                            longitude: this.form.x, latitude: this.form.y, mercatorAbscissa: this.form.mercatorAbscissa,
                            mercatorOrdinate: this.form.mercatorOrdinate
                        }];
                        let members = []
                        members = this.getCheckedNodes()
                        param.members = members;
                        param.remark = this.form.remark;
                        let createTime = new Date().getTime()
                        param.createTime = createTime;
                        this.pulishedTask.push({ id: this.tempMarkerID, type: 1 })
                        //发布给python
                        try {
                            channel.objects.pythonBridge.insertCheckTask(JSON.stringify(param))

                        } catch (error) {
                            console.warn(error);
                        }

                    }

                    //移除点击事件

                }
                this.tempMarkerID = ''
                this.selecedIndex = -100;
                this.map.off('click', this.markerClick)
                setTimeout(() => {
                    this.form.x = '',
                        this.form.y = '';
                    this.form.mercatorAbscissa = ''
                    this.form.mercatorOrdinate = ''

                }, 50)
            },
            //多节点发布或者删除
            polyPost(type) {
                if (type == 'delete') {
                    this.publishManager.polyline = false;

                    this.draw.removeRoute(this.tempRouteID);
                    this.startRouteMarker.remove()
                    this.startRouteMarker = ''
                    if (this.endRouteMarker) {
                        this.endRouteMarker.remove()
                        this.endRouteMarker = '';
                    }
                } else {
                    this.pulishedTask.push({ id: this.tempRouteID, type: 2, start: this.startRouteMarker, end: this.endRouteMarker })
                    this.publishManager.polyline = true;
                    let param = {}
                    param.name = this.form.task;
                    param.taskType = 2;

                    let points = this.draw.getRoutePointsById(this.tempRouteID)
                    param.list = points;
                    let members = [];
                    members = this.getCheckedNodes();
                    param.members = members;
                    param.remark = this.form.remark;
                    let createTime = new Date().getTime()
                    param.createTime = createTime;
                    // ！parseInt将16进制转10进制
                    let color = rgbConvertInt(this.color)

                    //增加颜色 和距离
                    param.color = color;
                    param.distance = this.drawManager.totalDistance;

                    //发布给python
                    try {
                        if (channel)
                            channel.objects.pythonBridge.insertCheckTask(JSON.stringify(param))

                    } catch (error) {
                        console.warn(error);
                    }


                }
                this.tempRouteID = null
                this.drawManager.polyLinePoints = [];
                this.drawManager.polyLine = null;
                this.drawManager.marks = [];
                this.drawManager.totalDistance = 0
                this.form.x = '';
                this.form.y = '';
                this.form.mercatorAbscissa = ''
                this.form.mercatorOrdinate = ''
                this.selecedIndex = -100;
                this.map.off('click', this.lineClick)
            },

            nodeSwitch(val, deviceId) {
                this.nodeHiddenManager.cards.forEach(item => {
                    if (item.deviceId == deviceId) {
                        item.switch = val
                    }
                })
            },
            //轨迹关闭或者开启
            trackSwitch(val, deviceId, list = []) {
                //val开关开启或者关闭 
                let param = { deviceIds: [deviceId], status: val * 1 };
                //赋值方便操作
                let open = this.trackManager.open;

                //轨迹开启
                if (val) {
                    //保存当前的地理位置 
                    if (list.length > 0) {
                        var points = list.map(item => {

                            return [item.longitude, item.latitude]
                        })
                    } else {
                        points = []
                    }
                    open[deviceId] = points;

                } else {
                    this.$delete(open, deviceId)

                    //删除这个轨迹 polyline
                }
                //通知python

                try {
                    channel.objects.pythonBridge.setLocus(JSON.stringify(param))
                } catch (error) {
                    console.warn(error);
                }
                /* channel.objects.pythonBridge.setLocus(JSON.stringify(param)) */
            },
            //轨迹全部开启或关闭
            allTrackSwitch(status) {
                if (status) {
                    let open = this.trackManager.open;
                    this.trackManager.cards.forEach((item) => {
                        item.switch = true;
                        //如果单个没有开启那就开启
                        if (!open[item.deviceId]) {
                            if (item.geo && item.geo.length > 0) {
                                var points = item.geo.map(item1 => {
                                    return [item1.longitude, item1.latitude]

                                })
                            } else {
                                var points = []
                            }
                            open[item.deviceId] = points
                        }
                    })
                } else {
                    this.trackManager.cards.forEach((item) => {
                        item.switch = false;
                    })
                    this.trackManager.open = {}
                }
                let deviceIds = this.trackManager.cards.map((item) => {
                    return item.deviceId
                })
                let param = { deviceIds, status: status * 1 }

                try {
                    channel.objects.pythonBridge.setLocus(JSON.stringify(param))
                } catch (error) {
                    console.warn(error);
                }
            },
            //全部节点隐藏
            allHidden(status) {
                this.nodeHiddenManager.cards.forEach(item => {
                    item.switch = status
                })
            },
            //任务类型转文字
            tasktypeConvert(name) {
                switch (name) {
                    case 1:
                        return I18n(this.language, 'singleNode')
                        break;
                    case 2:
                        return I18n(this.language, 'multinode')
                        break;
                    default:
                        return I18n(this.language, 'firestrike')
                        break;
                }
            },
            //详情展示页面
            toDetail(e, index, data) {
                const t = e.target;
                let { taskId } = data;
                //点击关闭任务
                if (t.tagName.toLowerCase() == 'button' || t.innerHTML == '关闭' || t.innerHTML == 'close') {
                    //暂时不删除
                    /* this.taskManager.cards.splice(index, 1) */
                    let param = { taskId }
                    //通知python关闭任务
                    try {
                        channel.objects.pythonBridge.completeTask(JSON.stringify(param));
                    } catch (error) {
                        console.warn(error)
                    }
                    //等待做的是 删除这任务相关的覆盖物 暂时不做
                } else {
                    //去详情
                    this.toggleDetail = 0;
                    try {
                        if (channel) {
                            channel.objects.pythonBridge.noticeGetAmendHistory(JSON.stringify({ taskId }));
                        }
                    } catch (error) {
                        console.warn(error)
                    }
                    this.dialogType = 'detail';
                    let { name, remark, createTime, members, taskMode } = data;
                    moment.suppressDeprecationWarnings = true;

                    createTime = moment(createTime).format('YYYY-MM-DD HH:mm:ss');
                    let memberNum = members.length;
                    let memberDetails = members.map(item => {
                        return item.deviceName
                    })
                    memberDetail = memberDetails.join(',')
                    if (data.taskType) {
                        let geo = data.list[0].longitude + ',' + data.list[0].latitude;
                        //多节点和标记点的详情是一样的
                        let detail = {
                            //任务
                            name,
                            //标记类型
                            taskType: data.taskType,
                            //下发时间
                            createTime,
                            //备注
                            remark,
                            //坐标
                            geo,
                            //指派人数
                            memberNum,
                            //人员详细信息
                            memberDetail,
                        }
                        this.detailManager.data = detail;

                    } else {
                        let detail = {
                            //任务
                            name,
                            //任务类型
                            taskMode,
                            //标记类型
                        }
                        /* 武器类别 */
                        detail = data
                        /* 申请时间 */
                        detail.createTime = moment(createTime).format('YYYY-MM-DD HH:mm:ss');
                        this.detailManager.data = detail;
                    }
                    this.dialogTitle = I18n(this.language, 'taskdetails')
                }
            },
            //设置中心点
            setCenter(geo, event) {
                //阻止冒泡
                event.stopPropagation()
                if (geo && geo.longitude) {
                    this.map.jumpTo({
                        center: [geo.longitude, geo.latitude]
                    })
                } else {
                    this.$message({
                        message: I18n(this.language, 'nodeHidding'),
                        duration: 900,
                        offset: 600
                    });
                }
            },
            //定时获取定时数据
            getPyData() {

                if (channel) {
                    channel.objects.pythonBridge.setNodeListData((res) => {
                        // {“memberInfo”:[]，“taskInfo“:[], “fireTaskInfo”:[]}
                        res = JSON.parse(res);
                        memberInfo = res.memberInfo;
                        taskInfo = res.taskInfo;
                        fireTaskInfo = res.fireTaskInfo;
                        /* 核辐射信息 */
                        geoFenceList = res.geoFenceList;
                        this.updateMapView(memberInfo, taskInfo, fireTaskInfo, geoFenceList)
                    })
                }
            },
            /*  更新地图 */
            //参数1人员信息   参数2侦察任务信息    参数3火力打击  参数4核辐射圈
            updateMapView(data1 = [], data2 = [], data3 = [], data4 = []) {
                //转成原来的列表 节点信息数据

                // console.log(data3,data4,2040);
                if (data1.groupList) {
                    data1 = toList(data1);
                } else {
                    data1 = []
                }

                //右侧节点信息
                if (this.curMeshIp) {
                    let myinfors = data1.filter(it => {
                        return it.meshIp == this.curMeshIp
                    })
                    let infor = myinfors[0]
                    if (infor) {
                        this.myInfor.name = infor.deviceName;
                        if (infor.list.length) {
                            let lnglat = {};
                            lnglat = LatlngCnvTool(infor.list[0], "DDD", "DMS");
                            this.myInfor.lng = lnglat.lng;
                            this.myInfor.lat = lnglat.lat;
                        }
                    }
                }
                /* 任务清单数据 包含侦查任务和火力打击任务 */
                let tasks = []
                let warnMembers = [];
                let warngeoFence = [];
                //过滤无经纬度的点
                data1 = data1.filter(it => {
                    let list = it.list
                    list = list.filter(i => {
                        return i.longitude
                    })
                    return it.list && it.list.length > 0 && list.length
                })
                if (data1.length) {  //节点数据为空无需处理

                    //节点隐藏
                    this.nodeHiddenManager.cards = data1.map(item => {
                        let obj = { deviceName: item.deviceName, deviceId: item.deviceId, switch: false, geo: item.list, groupName: item.groupName };
                        if (this.nodeHiddenManager.cards.length) {
                            let flag = this.nodeHiddenManager.cards.map(it => {
                                if (item.deviceId == it.deviceId) {
                                    obj.switch = it.switch
                                }

                            })
                        }
                        return obj
                    })
                    let list = this.nodeHiddenManager.cards.filter(it => {
                        return it.switch
                    })
                    data1 = data1.filter(item => {
                        return list.every(it => {
                            return it.deviceId != item.deviceId
                        })
                    })
                    data1.map((item) => {
                        let { deviceId, type, deviceName, list } = item;
                        //绘制人员位置
                        let other = { name: item.deviceName, id: item.deviceId, groupName: item.groupName };
                        if (list && list.length) {
                            let list = item.list.slice(-1)
                            // let start = new BMap.Point(list[0].longitude, list[0].latitude)
                            let start = [list[0].longitude, list[0].latitude]
                            data3.forEach(item1 => {
                                if (item1.status != 5) {
                                    let end = [item1.longitude, item1.latitude]
                                    let distance = this.draw.getDistance(start, end)
                                    if (distance < item1.safeRange) {
                                        warnMembers.push(item.deviceName)
                                        return
                                    }
                                }
                            })
                        }
                        /* 判断是否在核化圈内 */
                        if (data4.length > 0) {
                            if (list && list.length) {
                                let start = [list[0].longitude, list[0].latitude];
                                data4.forEach(item1 => {
                                    if (item1.mode == 2) {
                                        let end = [item1.longitude, item1.latitude]
                                        let distance = this.draw.getDistance(start, end)
                                        if (distance < item1.radius) {
                                            warngeoFence.push(item.deviceName)
                                            return
                                        }
                                    }

                                })
                            }
                        }
                    });
                }
                // /*  轨迹数据处理 */
                if (data1.length) {
                    data1 = data1.filter(item => {
                        return item.type != 2
                    })
                    // {
                    //     let index =parseInt(Math.random()*3)
                    //     let langlats = [
                    //         { longitude: 112.881435, latitude: 28.234558 },
                    //         { longitude: 112.882216, latitude: 28.234136 },
                    //         { longitude: 112.884246, latitude: 28.233285 },
                    //         { longitude: 112.884507, latitude: 28.234733 },
                    //     ]
                    //     data1 =[
                    //         {
                    //             deviceId: "7172075328030560256",
                    //             deviceName: "前指",
                    //             groupName: "gg",
                    //             meshIp: "192.168.1.13",
                    //             statusList: [],
                    //             list:[langlats[index]]
                    //         }
                    //     ]
                    // }
                    this.trackManager.cards = data1.map(item => {
                        let obj = { deviceName: item.deviceName, deviceId: item.deviceId, switch: false, geo: item.list, groupName: item.groupName };
                        let open = this.trackManager.open;
                        /* 轨迹开启 */
                        if (open[item.deviceId]) {
                            /* 状态修改 */
                            obj.switch = true;
                            let trackLineColor = 'rgb(175, 84, 164)'
                            /*  遍历当前有的位置信息 放入到原来已经保存的点的信息 */
                            if (item.list && item.list.length > 0) {

                                item.list.map(it => {

                                    open[item.deviceId].push([it.longitude, it.latitude])

                                })
                                this.draw.addTrackRoute({
                                    id: item.deviceId,
                                    coordinates: open[item.deviceId],
                                    color: trackLineColor,
                                })


                            }
                        } else {
                            //移除轨迹
                            this.draw.removeRoute(item.deviceId, 'trackRoute')


                        }
                        return obj
                    })
                }
                /* 告警信息 */
                if (warnMembers.length > 0 || warngeoFence.length > 0) {
                    /* 火力打击人员去重 */
                    let members = new Set(warnMembers);
                    members = Array.from(members);
                    /* 核辐射人员去重 */
                    let geoFence = new Set(warngeoFence);
                    geoFence = Array.from(geoFence);
                    let message = '';
                    /*  弹窗元素存在 */
                    if (this.warnMessage) {
                        if (members.length > 0 && geoFence.length > 0) {
                            message = `<div class="message-box" >${members.join(',')}${I18n(this.language, 'inFireRange')}</div>
                                      <div  class="message-box" >${geoFence.join(',')}${I18n(this.language, 'inRadiationRange')}</div>
                            `

                        } else {
                            if (members.length > 0) {
                                message += members.join(',') + `${I18n(this.language, 'inFireRange')}`
                            }
                            if (geoFence.length > 0) {
                                message += geoFence.join(',') + `${I18n(this.language, 'inRadiationRange')}`
                            }
                        }
                        this.warnMessage.message = message;
                    } else {
                        let pos = window.innerHeight - 100;
                        if (members.length > 0 && geoFence.length > 0) {
                            message = `<div class="message-box" >${members.join(',')}${I18n(this.language, 'inFireRange')}</div>
                                      <div  class="message-box" >${geoFence.join(',')}${I18n(this.language, 'inRadiationRange')}</div>
                            `
                        } else {
                            if (members.length > 0) {
                                message += members.join(',') + `${I18n(this.language, 'inFireRange')}`
                            }
                            if (geoFence.length > 0) {
                                message += geoFence.join(',') + `${I18n(this.language, 'inRadiationRange')}`
                            }
                        }
                        this.warnMessage = this.$message({
                            dangerouslyUseHTMLString: true,
                            message,
                            type: 'warning',
                            duration: 0,
                            offset: pos,
                            showClose: false,
                            center: true,

                        });
                    }
                } else {
                    if (this.warnMessage) {
                        this.warnMessage.close()
                        this.warnMessage = null;
                    }
                }

                //下面是数据进行对比 改变原有机制每次刷新都重新清空视图并创建
                //人员处理
                let compareMember = compareOldAndNew(this.tempDataManager.memberInfo, data1, "deviceId")

                if (compareMember.length) {
                    compareMember.map(it => {
                        let { deviceId, type, deviceName, list, statusList } = it;
                        let other = { name: it.deviceName, id: it.deviceId, groupName: it.groupName };
                        if (it.flag == 'add') {
                            statusList = statusList;
                            let back = (infor) => {
                                menuStatus =true;
                                let marker = this.draw.overlays.markers.get(deviceId);
                                let lnglat = marker.getLngLat()
                                let { x, y } = this.map.project([lnglat.lng, lnglat.lat]);
                                myArcMenu1(2, x, y, 75, ["./js/images/my/report2.png", "./js/images/my/report1.png",], this.menuHandelDetail, infor)
                            };

                            //other是组名和个人信息
                            let infor = {
                                meshId: deviceId,
                                coordinates: [list[0].longitude, list[0].latitude],
                                icon: "./js/images/my/38.png", iconSize: [15, 15],
                                callBack: back
                            };

                            // this.draw.addMarker(info)
                            this.draw.addMemeberMarker(infor, other, statusList);

                        }
                        if (it.flag == 'same') {
                            // console.log(2312, JSON.parse(JSON.stringify(statusList)));
                            let back = (infor) => {

                                let marker = this.draw.overlays.markers.get(it.deviceId);
                                let lnglat = marker.getLngLat()
                                let { x, y } = this.map.project([lnglat.lng, lnglat.lat]);
                                myArcMenu1(2, x, y, 75, ["./js/images/my/report2.png", "./js/images/my/report1.png",], this.menuHandelDetail, infor)
                            };
                            let coordinates = [list.slice(-1)[0].longitude, list.slice(-1)[0].latitude]
                            this.draw.updateMemeberMarker(deviceId, other, statusList, back, coordinates)
                        }
                        if (it.flag == 'delete') {
                            this.draw.removeMarker(it.deviceId)
                        }
                    })
                }
                this.tempDataManager.memberInfo = JSON.parse(JSON.stringify(data1));
                //侦察任务处理 包含多节点任务信息和单节点任务信息 
                let compareTaskInfo = compareOldAndNew(this.tempDataManager.taskInfo, data2, 'taskId')
                if (compareTaskInfo.length) {
                    compareTaskInfo.map(item => {
                        if (!item.members) {
                            item.members = []
                        }
                        //任务卡片处理
                        tasks.push(item)
                        if (item.flag == 'add') {
                            if (item.taskType == 2) {
                                /*  多节点任务绘制 */
                                // let infor = { id: item.taskId, list: item.list, color: item.color, distance: item.distance, name: item.name }
                                let coordinates = item.list.map((it) => {
                                    return [it.longitude, it.latitude]
                                })
                                let infor = { id: item.taskId, color: "#" + item.color.toString(16), name: item.name, coordinates }

                                this.draw.addRoute(infor)
                                // this.initPolyTask(infor)
                            } else {
                                /* 单节点任务 initMemberTask需要更换图标 */
                                let other = { name: item.name, id: item.taskId, groupName: item.groupName }
                                let list = item.list.slice(-1)
                                let infor = {
                                    meshId: item.taskId,
                                    coordinates: [list[0].longitude, list[0].latitude],
                                    icon: './js/images/my/36.png',
                                    remark: item.name,
                                    iconSize: [24, 24]
                                }
                                this.draw.addMarker(infor);
                            }
                        }
                        if (item.flag == 'delete') {
                            if (item.taskType == 2) {
                                //路线清除
                                this.draw.removeRoute(item.taskId);
                                this.draw.removeMarker(item.taskId + "start");
                                this.draw.removeMarker(item.taskId + "end")
                            } else {
                                this.draw.removeMarker(item.taskId)
                            }
                        }

                    })

                }
                this.tempDataManager.taskInfo = JSON.parse(JSON.stringify(data2));
                /* 核辐射信息圈绘制 */
                if (true) {
                    let comparegeoFenceList = compareOldAndNew(this.tempDataManager.geoFenceList, data4, 'id')
                    if (comparegeoFenceList.length) {
                        comparegeoFenceList.forEach(item => {
                            if (item.flag == 'add') {
                                let color = "#" + item.color.toString(16)
                                let infor = {
                                    id: item.id,
                                    centerCoordinate: [item.longitude, item.latitude],
                                    radians: item.radius,
                                    color,
                                    geoType: item.geoType,
                                    sender: item.sender,
                                    callBack: this.whitCircleClick
                                }

                                this.draw.addCircleTask(infor)
                            }
                            if (item.flag == 'delete') {
                                this.draw.removeCircle(item.id)
                            }
                        })
                    }
                }
                //火力引导绘制
                if (true) {
                    let compareFireTaskInfo = compareOldAndNew(this.tempDataManager.fireTaskInfo, data3, 'taskId')
                    if (compareFireTaskInfo.length) { //taskid
                        compareFireTaskInfo.forEach(item => {
                            if (item.flag == 'delete') {
                                this.draw.removeFireCircle(item.taskId)
                            }
                            if (item.status != 5) {
                                item.list = [{ longitude: item.longitude, latitude: item.latitude }];
                                item.members = []
                                tasks.push(item)

                            }
                            if (item.flag == 'add') {
                                if (item.status != 5) {
                                    //画轰炸圈
                                    item.list = [{ longitude: item.longitude, latitude: item.latitude }];
                                    item.members = []
                                    tasks.push(item)

                                    this.draw.addFireCircle(
                                        {
                                            centerCoordinate: [item.longitude, item.latitude],
                                            radians: item.safeRange,
                                            id: item.taskId
                                        }
                                    )

                                }
                            }
                            if (item.flag == 'same') {
                                if (item.status != 5) {
                                    //safeRange

                                    this.draw.updateFireCircle(item)
                                }
                            }
                        })
                    }
                    this.tempDataManager.fireTaskInfo = JSON.parse(JSON.stringify(data3))
                }
                //火力数据保存
                this.tempDataManager.geoFenceList = JSON.parse(JSON.stringify(data4))
                /* 任务清单卡片数据放在后面 */
                this.taskManager.cards = JSON.parse(JSON.stringify(tasks));

                if (this.publishManager.marker) {
                    // let marker = this.drawManager.marker;
                    // if (marker) {
                    //     this.map.removeOverlay(marker)
                    //     this.drawManager.marker = null;
                    // }
                }
                //去掉临时画的
                if (this.pulishedTask.length) {
                    this.pulishedTask.forEach(it => {
                        if (it.type == 1) {
                            this.draw.removeMarker(it.id)
                        }
                        if (it.type == 2) {

                            this.draw.removeRoute(it.id)
                            it.start.remove();
                            it.end.remove()
                        }
                        if (it.type == 4) {
                            let source = this.map.getSource('outCircleSource');
                            let id = it.id;
                            let features = source._data.features;
                            features = features.filter(feature => {
                                return feature.id != id
                            })
                            source.setData({
                                type: 'FeatureCollection',
                                features,
                            });
                            let innerSource = this.map.getSource('innerCircleSource');
                            let whiteID = it.whiteID;
                            let innerFeatures = innerSource._data.features; //内圈Features
                            innerFeatures = innerFeatures.filter(feature => {
                                return feature.id != whiteID
                            })

                            innerSource.setData({
                                type: 'FeatureCollection',
                                features: innerFeatures
                            });
                        }
                    })
                }
            },
            back() {
                this.dialogType = "task"

            },
            toHistory(taskId) {
                this.toggleDetail = 1;
                let param = { taskId }
                try {
                    if (channel) {
                        channel.objects.pythonBridge.getAmendHistory(JSON.stringify(param), (res) => {
                            res = JSON.parse(res)
                            this.history = res;
                        })
                    }
                } catch (error) {

                }
            },
            moment,
            computerTimediff(endTime) {
                if (!endTime) {
                    return 0
                } else {
                    var ts = endTime - new Date();
                    if (ts > 0) {
                        var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);
                        var mm = parseInt(ts / 1000 / 60 % 60, 10);
                        var ss = parseInt(ts / 1000 % 60, 10);
                        hh = hh < 10 ? ("0" + hh) : hh;   //时
                        mm = mm < 10 ? ("0" + mm) : mm;   //分
                        ss = ss < 10 ? ("0" + ss) : ss;   //秒
                        return `${hh}:${mm}:${ss}`
                    } else {
                        return I18n(this.language, 'blowOver')
                    }

                }
            },
            tabClick() {
                if (this.toggleDetail > 0) {
                    this.toHistory(this.detailManager.data.taskId)
                }
            },
            setMarkerGeo() {
                const EPSG_BD09 = '+proj=longlat +ellps=krass +towgs84=-54,-85,42,0,0,0,0 +no_defs';
                const EPSG_GUASS_KRUGER = '+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=38500000 +y_0=0 +ellps=krass +units=m +no_defs';
                // 转换为BD09坐标系
                const bd09Coordinates = this.proj4(EPSG_GUASS_KRUGER, EPSG_BD09, [this.form.mercatorAbscissa * 1, this.form.mercatorOrdinate * 1]);
                this.form.x = (bd09Coordinates[0]).toFixed(6);
                this.form.y = (bd09Coordinates[1]).toFixed(6);

                let point = new BMap.Point(this.form.x, this.form.y);
                if (this.drawManager.marker) {
                    this.drawManager.marker.setPosition(point)

                }
            },

            proj4,
            colorChange(color, index) {
                let colors = this.predefineColors
                //修改最后一项图块的颜色
                colors[colors.length - 1] = color;
                //绘制线的颜色 
                this.color = color;
                this.$set(colors, colors.length - 1, color)
                let map = this.map;
                var source = map.getSource('route');
                let features = source._data.features;//路线数据管理
                features.forEach(feature => {

                    if (feature.id == this.tempRouteID) {
                        feature.properties.color = this.color;
                    }
                })
                source.setData({
                    "type": "FeatureCollection",
                    features
                })
            },
            colorChange1(color, index) {
                let colors = this.predefineColors
                this.geogenceInfor.color = color;
                this.$set(colors, colors.length - 1, color)
                this.geogenceInfor.color = color;
                var map = this.map;
                var source = map.getSource('outCircleSource');
                if (source) {
                    let features = source._data.features;
                    let id = this.tempGeogencesIDs.slice(-1)[0]
                    features.forEach(feature => {
                        if (feature.id == id) {
                            feature.properties.color = color
                        }
                    })
                    source.setData({
                        type: 'FeatureCollection',
                        features,
                    });
                }
            },
            /*  更换mark图标 */
            setMarkerIcon(index) {
                this.selectedImg = index;
                this.labelType = index + 1
                /* this.dialogVisible = false; */
                this.computerImg(index)

            },
            //计算选择图标
            computerImg(index) {
                //敌方
                let list = []
                if (index == 0) {
                    for (let i = 5; i < 62; i++) {
                        list.push(i)
                    }

                }
                //友方drawenemy
                if (index == 1) {
                    for (let i = 62; i < 119; i++) {
                        list.push(i)
                    }
                }
                this.subImgList = list;
            },
            //绘制敌我标记
            async drawenemy(infor) {
                let { id, labelType, sender, longitude, latitude, deviceType = 1, remark, } = infor;

                let imageSize = await getSizeByUrl(this.labelTypeConvert(labelType));
                let icon = this.labelTypeConvert(labelType);
             
                let iconSize = [imageSize.width, imageSize.height];
                let colors = ['rgba(212,226,231,0.6)', 'rgba(212,226,231,0.6)', 'rgba(212,226,231)', 'rgba(212,226,231,0.6)']
                let Back = (e) => {
                    menuStatus =true;
                    let marker = this.draw.overlays.markers.get(infor.id);
                    let lnglat = marker.getLngLat()
                    let { x, y } = this.map.project([lnglat.lng, lnglat.lat]);
                    if (infor.sender != this.curMeshID) {
                        //只带删除的菜单
                       
                        myArcMenu(4, x, y, 75,
                            ["./js/images/my/detail1.png", "./js/images/my/delete.png", "./js/images/my/modify1.png", "./js/images/my/amend1.png",],
                            this.menuHandelDelete, infor, colors)
                    } else {
                        //都带的菜单
                        myArcMenu(4, x, y, 75,
                            ["./js/images/my/detail.png", "./js/images/my/delete.png", "./js/images/my/modify.png", "./js/images/my/amend.png",],
                            this.menuHandel, infor)
                    }
                };
                let markerInfo = {
                    meshId: id,
                    coordinates: [longitude, latitude],
                    icon,
                    iconSize,
                    callBack: Back,
                    remark
                };


                let marker = this.draw.addMarker(markerInfo);

                this.map.off('click', this.enemyClick)
            },
            //敌我标记点击事件
            enemyClick(e) {

                this.dialogVisible = false;
                let { lng, lat } = e.lngLat;
                let { x, y } = e.point;
                let id = new Date().getTime() * 1 + (Math.round(0, 1)) * 100 + ""
                let labelType = this.labelType
                let sender = '';
                let infor = { id, labelType, sender, longitude: lng, latitude: lat, deviceType: 1, sendType: 1, x, y }

                try {
                    channel.objects.pythonBridge.insertLabel(JSON.stringify(infor))
                    //pyqt会调用updateLabel进行数据更新
                } catch (error) {
                }
            },
            labelTypeConvert(index) {
                return `./js/images/hostile/${index}.png`
            },

            //菜单执行函数
            menuHandel(key, infor) {
                switch (key) {
                    case 0:
                        //删除
                        infor.sendType = 1;
                        channel.objects.pythonBridge.deleteLabel(JSON.stringify(infor))
                        break;
                    case 1:
                        //修改描述
                        this.dialogType = 'describe';
                        this.dialogTitle = '';
                        this.dialogVisible = true;
                        this.menuClickInfo = infor;
                        this.labelDes = infor.remark || ''
                        break;
                    case 2:
                        this.menuClickInfo = infor;
                        this.map.once('click', this.updateEnemyLnglat) //只执行一次

                        break;
                    case 3:
                        //修改图标
                        this.dialogVisible = true;
                        this.dialogType = 'hostile';
                        this.menuHandelStatus = true;
                        this.menuClickInfo = infor;
                        break;

                    default:
                        break;
                }

            },
            menuHandelDelete(key, infor) {

                if (key == 0) {
                    infor.sendType = 1;
                    channel.objects.pythonBridge.deleteLabel(JSON.stringify(infor))
                }
            },
            //发布的时候执行
            getCheckedNodes() {
                let res = this.$refs.tree.getCheckedNodes()
                //过滤组名项
                res = res.filter(ele => {

                    return !ele.memberList
                })
                //处理多余的属性
                res = res.map(ele => {
                    return { deviceName: ele.meshName, deviceId: ele.meshId }
                })

                return res
            },
            //找qt获取派发人员
            getmembers() {
                channel.objects.pythonBridge.setNodeListData((res) => {
                    res = JSON.parse(res);
                    //人员信息
                    data1 = res.memberInfo;

                    if (data1.groupList) {

                        this.treeData = toTree(data1, I18n(this.language, 'all'));
                    } else {
                        this.treeData = []
                    }
                })
            },
            //pyqt 绘制全量敌我标识
            getLabelList(list) {
                list = JSON.parse(list)

                list.forEach(it => {

                    this.drawenemy(it)
                })
                this.picture.list = list
                this.updatePictureView(this.picture.map, list)

                if (list.length) {
                    this.drawMarkerInPicture(list, 'all', this.picture.map)
                }
                this.showResetIcon = false;
                this.picture.map.on('moveend', this.moveEnd);


            },
            //pyqt 修改marker
            async updateLabel(infor) {

                infor = JSON.parse(infor)
                this.showResetIcon = false;
                this.picture.map.off("moveend", this.moveEnd)
                let { type, id, labelType, longitude, latitude, createTime, remark } = infor;
                switch (type) {
                    //新增
                    case 0:
                        this.drawenemy(infor)
                        this.picture.list.push(infor)
                        this.updatePictureView(this.picture.map, this.picture.list)
                        this.drawMarkerInPicture(infor, 'add', this.picture.map)
                        break;
                    //删除
                    case 1:
                        let marker = this.draw.overlays.markers.get(id); //获取marker
                        marker.remove(); //移除marker
                        this.picture.list = this.picture.list.filter(it => {
                            if (it.id != infor.id) {
                                return it
                            }
                        })
                        console.log(this.picture.list,2797);
                        if(this.picture.list.length){

                            this.updatePictureView(this.picture.map, this.picture.list)
                        }else{
                            this.showResetIcon = false;
                        }
                        this.drawMarkerInPicture(infor, 'delete', this.picture.map)
                        break;
                    //修改 图标和位置 描述
                    case 2:
                        {
                            this.picture.list.forEach(it => {
                                if (it.id == infor.id) {
                                    it.longitude = infor.longitude;
                                    it.latitude = infor.latitude;
                                }
                            })
                            this.updatePictureView(this.picture.map, this.picture.list)
                            let marker1 = this.pictureMarkers.get(id);
                            marker1.setLngLat([longitude, latitude]) //画中画修改位置
                            let marker = this.draw.overlays.markers.get(id);

                            marker.setLngLat([longitude, latitude]) //修改位置

                            let el = marker.getElement()
                            //修改图标 
                            let imageSize = await getSizeByUrl(this.labelTypeConvert(labelType))
                            let iconSize = [imageSize.width, imageSize.height]
                            let icon = this.labelTypeConvert(labelType)

                            if (remark) {
                                var innerHTML = `<div >
                                                   <img src=${icon}></img>
                                                  </div>
                                                 <div class='hostileLabel'>${remark}
                                                 </div>`

                            } else {
                                var innerHTML = ` <div>                                   
                                                  <img src=${icon}></img>
                                                  </div>`
                            }
                            el.innerHTML = innerHTML
                        }

                        break;
                    default:
                        break;
                }
                setTimeout(() => {
                    this.picture.map.on("moveend", this.moveEnd)
                }, 1000)

            },
            //更新描述
            async updateDes(code) {
                if (!code) {
                    this.dialogVisible = false;
                } else {
                    let infor = this.menuClickInfo;
                    infor.remark = this.labelDes;
                    infor.sendType = 1;
                    channel.objects.pythonBridge.updateLabelRemark(JSON.stringify(infor))
                }
                this.dialogVisible = false
            },
            //节点复选框变化
            foldShow() {
                this.isshow = !this.isshow;
                if (this.isshow) {
                    this.foldImg = './js/images/config.png'
                } else {
                    this.foldImg = './js/images/config1.png'
                }
            },
            //阻止回车事件
            enterEvent(event) {
                event.preventDefault();
            },
            //新增火力打击
            addFireTask(data) {
                data = JSON.parse(data)
                this.fireTaskList.unshift(data);
                const h = this.$createElement;
                let notify = this.$notify({
                    title: I18n(this.language, 'notify'),
                    dangerouslyUseHTMLString: true,
                    message: h('div', {},
                        [
                            this.$createElement('div',
                                {
                                    style: {
                                        fontWeight: 'bold',
                                        fontSize: '16px'
                                    }
                                }, I18n(this.language, 'newFireStrike')),
                            this.$createElement('div',
                                {
                                    class: 'el-button  is-round  el-button--samll',
                                    on: {
                                        click: () => {
                                            this.goTask(notify, data)
                                        }
                                    }
                                }, I18n(this.language, 'go')),
                            this.$createElement('div',
                                {
                                    class: 'el-button  is-round  el-button--samll',
                                    on: {
                                        click: () => {
                                            this.nextTask(notify)
                                        }
                                    }
                                }, I18n(this.language, 'waiting')),
                        ]),
                    duration: 0
                })
            },
            // /*  新增火力引导修正申请 */
            addAmendFireGuidance(data) {
                data = JSON.parse(data)
                this.fireTaskList.unshift(data);
                const h = this.$createElement;
                let notify = this.$notify({
                    title: I18n(this.language, 'notify'),
                    dangerouslyUseHTMLString: true,
                    message: h('div', {},
                        [
                            this.$createElement('div',
                                {
                                    style: {
                                        fontWeight: 'bold',
                                        fontSize: '16px'
                                    }
                                }, I18n(this.language, 'strikeAmendment')),
                            this.$createElement('div',
                                {
                                    class: 'el-button  el-button--samll',
                                    on: {
                                        click: () => {
                                            this.goTask(notify, data, 1)
                                        }
                                    }
                                }, I18n(this.language, 'go')),
                            this.$createElement('div',
                                {
                                    class: 'el-button  el-button--samll ',
                                    on: {
                                        click: () => {
                                            this.nextTask(notify)
                                        }
                                    }
                                }, I18n(this.language, 'waiting')),
                        ]),
                    duration: 0
                })
            },
            //立即查看
            goTask(notify, data, index) {
                this.updateFireTaskDesc()
                this.dialogType = 0;
                if (index) {
                    this.dialogType = 4;
                }
                this.dialogVisible = true;
                this.fireForm = data;

                notify.close();
                try {
                    channel.objects.pythonBridge.getFireTaskList((res) => {
                        res = JSON.parse(res)
                        let fireList = res.fireList;
                        fireList.forEach(item => {
                            if (item.abscissa) {
                                item.abscissa = this.myParseInt(item.abscissa);
                                item.ordinate = this.myParseInt(item.ordinate)
                            }
                        })
                        /* 更新任务数据 */
                        this.updateTaskList(fireList)
                    })
                } catch (error) {

                }
            },
            //稍后查看
            nextTask(notify) {
                notify.close()
            },
            /*  修改并确认火力引导信息就是  待确认的详情 */
            updateFireGuidance() {
                let params = JSON.parse(JSON.stringify(this.fireForm))

                params.countdown = this.countdown;
                params.countdownUnit = this.countdownUnit;
                this.dialogVisible = false;
                try {
                    channel.objects.pythonBridge.updateFireGuidance(JSON.stringify(params))
                } catch (error) {

                }
            },
            /*  驳回火力任务 */
            rejectFireGuidance() {
                let taskId = this.fireForm.taskId
                let params = { taskId }
                this.dialogVisible = false;
                try {
                    channel.objects.pythonBridge.rejectFireGuidance(JSON.stringify(params))
                } catch (error) {

                }
            },
            //武器类别更改
            categoryChange(category) {
                this.weapon.forEach(item => {
                    if (category == item.weaponName) {
                        let list = item.itemList;
                        this.weaponTypeOption = list.map((it) => {
                            return it.weaponName
                        })
                    }
                })
                this.fireForm.weaponType = this.weaponTypeOption[0]

            },
            //属性修改
            propertyChange(value) {
                let arr = this.targetProperties.filter(item => {

                    return item.value == value

                })
                this.fireForm.propertyCode = arr[0].code


            },
            //目标状态修改
            targetStatusChange(value) {
                let arr = this.targetStatusList.filter(item => {
                    return item.value == value
                })
                this.fireForm.targetStatusCode = arr[0].code;

            },
            /*   撤销火力引导 */
            cancelFireGuidance(data) {
                let res = JSON.parse(data);
                let id = res.taskId;
                this.fireTaskList.forEach((item, index) => {
                    if (item.taskId == id) {
                        this.fireTaskList.splice(index, 1)
                    }
                })
            },
            /* 打击修正确认 */
            blowAmendConfirm() {
                let params = JSON.parse(JSON.stringify(this.fireForm))
                params.countdown = this.countdown;
                params.countdownUnit = this.countdownUnit;
                this.dialogVisible = false;
                try {
                    channel.objects.pythonBridge.blowAmendConfirm(JSON.stringify(params))
                } catch (error) {

                }
            },
            /* 更新任务信息 */
            updateTaskList(data) {
                /*  火力打击任务清单数据赋值 */
                this.fireTaskList = data;
            },
            /*  火力清单到详情页面 */
            toFireDetail(e, index, data) {
                console.log(3057);
                let status = data.status;
                this.dialogType = status;
                this.fireForm = data;
                this.updateFireTaskDesc()
            },
            myParseInt,
            fireTaskController() {
                this.offAllClick()
                this.selecedIndex = 6;
                this.dialogType = -1;
                this.dialogVisible = true;
                this.dialogTitle = I18n(this.language, 'fireguidetasklist');
                this.updateTaskList(_fireList)
                try {
                    channel.objects.pythonBridge.refreshFireTaskList()
                    channel.objects.pythonBridge.getFireTaskList((res) => {
                        res = JSON.parse(res)
                        /* 更新任务数据 */
                        let fireList = res.fireList;
                        fireList = fireList.filter(item => {
                            return item.status != 5
                        })
                        fireList.forEach(item => {
                            if (item.abscissa) {
                                item.abscissa = this.myParseInt(item.abscissa);
                                item.ordinate = this.myParseInt(item.ordinate)
                            }
                        })

                        this.updateTaskList(fireList)
                    })
                    channel.objects.pythonBridge.refreshFireTaskList()
                    channel.objects.pythonBridge.noticeGetFireTaskDescriptionInfo()
                } catch (error) {

                }
            },
            /*  火力引导任务状态转换 */
            fireStatusConvert(index) {
                switch (index) {
                    case 0:
                        return I18n(this.language, 'tobeconfirmed')
                        break;
                    case 3:
                        return I18n(this.language, 'confirmed')
                        break;
                    case 4:
                        return I18n(this.language, 'strikeAmendMentapplication')
                        break;
                    case 5:
                        return I18n(this.language, 'closed')
                        break;
                    case 6:
                        return I18n(this.language, 'strikeCorrectionAcknowledgement')
                        break;
                    default:
                        break;
                }
            },
            /* 通过python获取数据并更新 */
            getFire() {
                try {
                    channel.objects.pythonBridge.getFireTaskList((res) => {
                        res = JSON.parse(res)
                        let fireList = res.fireList;
                        let markList = res.markList;
                        let memberList = res.memberList
                        fireList.forEach(item => {
                            if (item.abscissa) {
                                item.abscissa = this.myParseInt(item.abscissa);
                                item.ordinate = this.myParseInt(item.ordinate)
                            }
                        })
                        /*  this.updateFireCanvas(fireList, markList, memberList) */
                    })
                } catch (error) {

                }
            },
            //画中画视图更新
            updatePictureView(map, list, isReset) {
                // console.log(3158);
                const coordinates = list.map(it => {
                    return [it.longitude, it.latitude]
                })
                const bounds = new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]);
                // 遍历坐标数组，扩展边界框  
                coordinates.forEach(coord => {
                    bounds.extend(coord);
                });
                // 调整地图视图以包含边界框  
                map.fitBounds(bounds, {
                    padding: { top: 20, bottom: 20, left: 20, right: 20 }, // 可选的内边距  
                    maxZoom: 21,// 可选的最大缩放级别 

                });


            },
            //重置画中画
            resetPictureView() {
                // this.pictureReseting = true;
                this.picture.map.off("moveend", this.moveEnd)
                if(this.picture.list.length){
                    this.updatePictureView(this.picture.map, this.picture.list)
                }
                this.showResetIcon = false;
                setTimeout(() => {
                    this.picture.map.on("moveend", this.moveEnd)
                }, 1000)

            },

            //获取画中画图标类型
            getPictureImage(labelType) {
                let url = ''
                if (labelType == 1 || labelType > 4 && labelType < 62) {
                    url = './js/images/picture/redciricle.png'
                }
                if (labelType == 2 || labelType > 62 && labelType < 119) {
                    url = './js/images/picture/bluecircle.png'
                }
                if (labelType == 3) {
                    url = './js/images/picture/greencircle.png'
                }
                if (labelType == 4) {
                    url = './js/images/picture/yellowcircle.png'
                }

                return url
            },
            //绘制画中画 标记物
            drawMarkerInPicture(infor, oprateType, map) {
                switch (oprateType) {
                    case 'all':
                        {
                            if (infor.length) {
                                infor.forEach(it => {
                                    let callBack = () => {

                                        let marker = this.pictureMarkers.get(it.id);
                                        let lnglat = marker.getLngLat()

                                        this.map.jumpTo({
                                            center: [lnglat.lng, lnglat.lat]
                                        })
                                    }
                                    let i = {
                                        meshId: it.id,
                                        coordinates: [it.longitude, it.latitude],
                                        icon: this.getPictureImage(it.labelType),
                                        iconSize: [24, 24],
                                        callBack: callBack
                                        // callBack:this.pictureMarkerClick
                                    }
                                    this.addPictureMarker(i)
                                })
                            }
                        }
                        break;
                    case 'delete':
                        
                        let del = this.pictureMarkers.get(infor.id)
                      
                        if (del) {
                            del.remove()
                        }
                        break;
                    case 'add':
                        that = this;
                        {
                            let callBack = () => {

                                let marker = this.pictureMarkers.get(infor.id);
                                let lnglat = marker.getLngLat()

                                this.map.jumpTo({
                                    center: [lnglat.lng, lnglat.lat]
                                })
                            }
                            let i = {
                                meshId: infor.id,
                                coordinates: [infor.longitude, infor.latitude],
                                icon: this.getPictureImage(infor.labelType),
                                iconSize: [24, 24],
                                callBack: callBack
                            }
                            this.addPictureMarker(i)
                        }
                        break;
                    default:
                }

            },
            //查看弹药详情
            toAmmoDetail(infor) {

                if (infor) {
                    this.ammoDetail = infor;
                }
                this.dialogVisible = true;
                this.dialogType = 'ammoDetail'
                this.dialogTitle = I18n(this.language, 'ammunition')
            },
            //查看战斗力详情
            toBattleDetail(infor) {
                if (infor) {
                    this.battleDetail = infor;
                }
                this.dialogVisible = true;
                this.dialogType = 'battleDetail'
                this.dialogTitle = I18n(this.language, 'FightingCapacity')
            },
            //战斗力状态转换
            battleStatusConvert(status) {
                let str = ''
                switch (status) {
                    case 0:
                        str = I18n(this.language, 'relieved')
                        break;
                    case 1:
                        str = I18n(this.language, 'wounded')
                        break;
                    case 2:
                        str = I18n(this.language, 'seriouslyinjured')
                        break;
                    case 3:
                        str = I18n(this.language, 'help')
                        break;
                    default:
                        break;
                }
                return str
            },
            //火力状态转换
            ammoStatusConvert(status) {
                let str = ''
                switch (status) {
                    case 0:
                        str = I18n(this.language, 'ammunitionReplenished')
                        break;
                    case 1:
                        str = I18n(this.language, 'ammunitionShortage')
                        break;
                    case 2:
                        str = I18n(this.language, 'lowAmmo')
                        break;
                    case 3:
                        break;
                    default:
                        break;
                }
                return str
            },
            //上报显示内容  type为2弹药详情 type为1 战斗力详情
            reportContent(type, list, meshName, meshId) {

                if (!list.length) {
                    return {
                        status: 0
                    }
                } else {
                    let temp = list.filter(it => {
                        return it.type == type
                    })

                    if (!temp.length) {
                        return {
                            status: 0
                        }
                    } else {
                        temp[0].meshName = meshName;
                        temp[0].meshId = meshId;
                        return {
                            status: 1,
                            data: temp[0]
                        }
                    }
                }
            },
            //关闭上报
            closeReporter(type) {
                let param = {}
                param.type = type;

                if (type == 1) {
                    param.reportMeshId = this.battleDetail.meshId;
                } else {
                    param.reportMeshId = this.ammoDetail.meshId;
                }
                this.dialogVisible = false;

                channel.objects.pythonBridge.closeStatusReport(JSON.stringify(param))
                //调用函数关闭上报
            },

            menuHandelDetail(type, details) {
                type += 1;
                switch (type) {
                    case 1:
                        if (details.battleDetail) {

                            this.toBattleDetail(details.battleDetail)
                        }
                        break;
                    case 2:
                        if (details.ammoDetail) {

                            this.toAmmoDetail(details.ammoDetail)
                        }



                        break;
                    default:
                        break;
                }

            },
            //python 左侧菜单状态
            updatePyqtMenu(status) {

                if (status < 1) {
                    this.myInforShow = true;

                } else {
                    this.myInforShow = false;

                }
            },
            //py参数传递
            setParameter(infor) {

                infor = JSON.parse(infor);
                // infor.meshIp = this.curMeshIp;
                this.curMeshIp = infor.meshIp;
                this.curMeshID = infor.id;

                this.language = infor.language
            },
            //航拍地图启用
            enableMap(flyMapdata) {
                console.log(3419);
                flyMapdata = JSON.parse(flyMapdata);
                let axis = flyMapdata.axis; //axis对应的数据依次分别为左上 左下 右上 右下
                let url = flyMapdata.url;
                this.draw.addImage({
                    url,
                    //coordinates 坐标顺序 左上 右上 右下 左下
                    coordinates: [
                        [
                            axis[0],
                            axis[1],
                        ],
                        [
                            axis[4],
                            axis[5],
                        ],
                        [
                            axis[6],
                            axis[7],
                        ],
                        [
                            axis[2],
                            axis[3],
                        ],
                    ]
                })
                if (!url) {
                    this.toFlymapInfor = null
                    return
                } else {
                    this.toFlymapInfor = {}
                    let lng = (axis[2] + axis[4]) / 2
                    let lat = (axis[3] + axis[5]) / 2
                    this.toFlymapInfor.lng = lng
                    this.toFlymapInfor.lat = lat
                }
            },
            //定位到航拍地图
            toFlymap() {
                this.offAllClick()
                this.selecedIndex = 7;
                this.dialogType = "flyMap"
                let infor = this.toFlymapInfor
                if (infor) {
                    this.map.jumpTo({
                        center: [infor.lng, infor.lat]
                    })
                } else {
                    this.$message({
                        message: I18n(this.language, 'noAerial'),
                        duration: 900,
                        offset: 500,

                    });
                }
                setTimeout(() => {
                    this.selecedIndex = -100;
                }, 500)
            },
            //获取状态上报图片
            getReportImgByStatus(status, type) {
                let imgurl = '';
                let baseurl = './js/images/my/'
                if (status == 1) {
                    switch (type) {
                        case 1:
                            imgurl = baseurl + 'report3.png'
                            break;
                        case 2:
                            imgurl = baseurl + 'report4.png'
                            break;
                        case 3:
                            imgurl = baseurl + 'report5.png'
                            break;
                        default:
                            break;
                    }
                } else {
                    switch (type) {
                        case 1:
                            imgurl = baseurl + 'report6.png'
                            break;
                        case 2:
                            imgurl = baseurl + 'report7.png'
                            break;
                        case 3:

                            break;
                        default:
                            break;
                    }
                }

                return imgurl
            },
            createGeogence() {
                //重复点击绘制不提交
                this.offAllClick()
                if (!this.geogenceInfor.status && this.selecedIndex == 8) {
                    return
                }
                let that = this;
                this.geogenceInfor.progress = 1;
                this.selecedIndex = 8;
                this.dialogVisible = false;

                this.map.on('click', this.geogenceClick)
            },
            geogenceClick(e) {
                let that = this;
                if (that.selecedIndex != 8) {
                    return
                }
                that.geogenceInfor.status = false;
                let id = (new Date()).getTime() + ''
                let progress = that.geogenceInfor.progress
                let point = e.lngLat;
                if (point) {
                    if (progress == 1) {
                        that.tempWhiteGeogencesIDs.push(id);
                        that.geogenceInfor.longitude = point.lng;
                        that.geogenceInfor.latitude = point.lat;
                        that.geogenceInfor.progress = 2;
                        that.draw.addWhiteCircle({ id, coordinates: [point.lng, point.lat] })
                    } else {
                        that.tempGeogencesIDs.push(id)
                        let centerCoordinate = [that.geogenceInfor.longitude, that.geogenceInfor.latitude]
                        let radians = that.draw.getDistance(centerCoordinate, [point.lng, point.lat]) //半径为km
                        that.geogenceInfor.radius = radians
                        let color = that.geogenceInfor.color;
                        that.draw.addBigCircle({ id, centerCoordinate, radians, color })
                        //改变层级
                        let source = that.map.getSource('outCircleSource')
                        if (source) {
                            that.map.moveLayer('outCircle', 'innerCircle')
                        }
                        that.dialogVisible = true;
                        that.dialogType = 'geogence'
                        that.dialogTitle = I18n(this.language, 'graphicrendering')
                        this.map.off('click', this.geogenceClick)
                    }
                }
            },
            //根据geotype转文字
            geoTypeConvertText(type) {
                let str = ''
                switch (type) {
                    case 0:
                        str = I18n(this.language, 'nuclearradiationregion')
                        break;

                    default:
                        break;
                }
                return str
            },
            //根据告警类型转文字
            warningModeConvertText(type) {
                let str = ''
                switch (type) {
                    case 1:
                        str = I18n(this.language, 'noalarm')
                        break;
                    case 2:
                        str = I18n(this.language, 'withinscope')
                        break;
                    default:
                        break;
                }
                return str
            },
            //图形绘制 确认取消按钮
            createGeogenceConfirm(instruct) {
                this.dialogVisible = false;
                this.selecedIndex = -100;
                let id = (new Date()).getTime()
                let { radius, opacity, mode, geoType, color, longitude, latitude } = this.geogenceInfor;
                color = rgbConvertInt(color)
                radius = parseInt(radius)
                let param = { id, radius, opacity, mode, geoType, color, longitude, latitude }

                if (instruct == 1) {
                    this.geogenceInfor.status = true;
                    try {
                        channel.objects.pythonBridge.insertGeoFence(JSON.stringify(param))
                    } catch (error) {
                        console.warn(error);
                    }
                    let id = this.tempGeogencesIDs.slice(-1)[0];
                    let whiteID = this.tempWhiteGeogencesIDs.slice(-1)[0];
                    this.pulishedTask.push({
                        type: 4,
                        id,
                        whiteID
                    })
                } else {
                    this.geogenceInfor.status = false;
                    var map = this.map;
                    let source = map.getSource('outCircleSource');
                    if (source) {
                        //取消只需取消一个
                        let id = this.tempGeogencesIDs.slice(-1)[0];
                        let features = source._data.features;
                        features = features.filter(feature => {
                            return feature.id != id
                        })
                        source.setData({
                            type: 'FeatureCollection',
                            features,
                        });
                    }
                    let innerSource = map.getSource('innerCircleSource'); //内圈source
                    // //去掉白色小圈
                    if (innerSource) {

                        let whiteID = this.tempWhiteGeogencesIDs.slice(-1)[0];
                        let innerFeatures = innerSource._data.features; //内圈Features

                        innerFeatures = innerFeatures.filter(feature => {
                            return feature.id != whiteID
                        })

                        innerSource.setData({
                            type: 'FeatureCollection',
                            features: innerFeatures
                        });
                    }
                    this.geogenceInfor.progress = 1;
                    this.tempGeogencesIDs = []
                }
            },
            //生成id
            generateId() {
                let id = (new Date()).getTime();
                return id
            },

            rgbToHex(rgb) {
                let reg = /^\d{1,3}$/;  // 限定1-3位 -> 0~255
                if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return false
                let hex = [r.toString(16), g.toString(16), b.toString(16)]
                // 转换的值如果只有一位则补0
                for (let i = 0; i < 3; i++) {
                    if (hex[i].length === 1) hex[i] = `0${hex[i]}`
                }
                return `#${hex.join('')}` // #409eff
            },
            offAllClick() {
                this.map.off('click', this.markerClick)
                this.map.off('click', this.lineClick)
                this.map.off('click', this.geogenceClick)
                this.map.off('click', this.enemyClick);

            },
            //更新敌我标识位置
            updateEnemyLnglat(e) {
                let infor = this.menuClickInfo;

                infor.longitude = e.lngLat.lng;
                infor.latitude = e.lngLat.lat;
                infor.sendType = 1;
                channel.objects.pythonBridge.updateLabelLocation(JSON.stringify(infor))
            },
            //白色圆圈点击事件
            whitCircleClick(e) {
                var features = this.map.queryRenderedFeatures(e.point, {
                    layers: ['innerCircle'],
                });
                let id = features[0].id;
                let sender = '';
                let geoType = 0;

                this.$confirm(I18n(this.language, 'deleteIcon') + ',' + I18n(this.language, 'continue') + "?", '', {
                    confirmButtonText: I18n(this.language, 'confirm'),
                    cancelButtonText: I18n(this.language, 'cancel'),
                    type: 'warning'
                }).then(() => {

                    try {
                        //通知python同步服务端数据
                        channel.objects.pythonBridge.deleteGeoFence(JSON.stringify({ id, sender, geoType }))
                    } catch (error) {
                        console.warn(error)
                    }
                }).catch(() => {

                });
            },
            //画中画新增图形
            addPictureMarker(infor) {
                let { meshId, coordinates, icon, iconSize, callBack, } = infor
                let el = document.createElement('div');
                el.className = 'marker';
                if (callBack) {
                    el.addEventListener("click", callBack)
                }
                var innerHTML =
                    `<div >
                <img src=${icon} style='width:${iconSize[0]}px;height:${iconSize[0]}px'></img>
                 </div>
                 `
                el.innerHTML = innerHTML
                let marker = new mapboxgl.Marker(el);
                marker.setLngLat(coordinates);
                marker.addTo(this.picture.map);
                this.pictureMarkers.set(meshId, marker)
            },
            moveEnd(e) {

                if (this.flag) {
                    this.showResetIcon = true;
                } else {
                    this.flag = true
                }



            },
            updateFireTaskDesc() {
                if (channel) {
                    channel.objects.pythonBridge.getFireTaskDescriptionInfo((res) => {
                        res = JSON.parse(res)
                        this.taskTypeList = res.taskTypeList;
                        this.targetProperties = res.targetProperties;
                        this.targetStatusList = res.targetStatusList
                        this.weapon = res.weapon;
                        let op = this.weapon.find(it => {
                            return it.weaponName == this.fireForm.category

                        })
                        this.weaponTypeOption = op.itemList.map(it => {
                            return it.weaponName
                        })

                        this.categorys = this.weapon.map(item => {
                            return item.weaponName
                        })
                        // console.log(this.taskTypeList, this.targetProperties, this.weapon, this.category, 3070);
                    })
                }
            }

        },
        watch: {
            dialogVisible(newValue, oldValue) {
                if (this.selecedIndex == 8) {
                    return
                }
                if (!newValue) {
                    this.offAllClick()
                    if (this.menuHandelStatus) {
                        this.menuHandelStatus = false
                    }

                } else {

                }
                this.publishManager.marker = false;
                this.publishManager.polyLine = false;
            },
            // //敌我标识图形更改
            async labelType(newValue) {
                if (this.menuHandelStatus) {
                    // let imageSize = await getSizeByUrl(`./js/images/hostile/${newValue}.png`)
                    // let icon = new BMap.Icon(`./js/images/hostile/${newValue}.png`, new BMap.Size(imageSize.width, imageSize.height))
                    // this.menuClickInfo.setIcon(icon)
                    this.menuClickInfo.labelType = newValue
                    this.menuClickInfo.sendType = 1;
                    channel.objects.pythonBridge.updateLabel(JSON.stringify(this.menuClickInfo))
                    this.dialogVisible = false;
                }

            },



        },
        created() {

            window.toAmmoDetail = this.toAmmoDetail;
            window.toBattleDetail = this.toBattleDetail;
            this.form.remark = I18n(this.language, 'remark')
            this.userName = I18n(this.language, 'userName')

        },
        mounted() {


            // {
            //     let startZoom, firstDistance, startLng, startLat, startClientX, startClientY, startDistance, isUpdating = false;
            //     const mapContainer = document.getElementById("allmap");

            //     mapContainer.addEventListener("touchstart", function (event) {
            //         const touches = event.touches;
            //         if (touches.length === 1) {
            //             // 单指操作
            //             startClientX = event.changedTouches[0].clientX;
            //             startClientY = event.changedTouches[0].clientY;
            //             startLng = map.getCenter().lng;
            //             startLat = map.getCenter().lat;
            //             startZoom = map.getZoom();
            //         } else if (touches.length > 1) {
            //             // 双指操作
            //             const events1 = touches[0];
            //             const events2 = touches[1];
            //             startZoom = map.getZoom();
            //             const one = { x: events1.pageX, y: events1.pageY };
            //             const two = { x: events2.pageX, y: events2.pageY };
            //             firstDistance = getDistance(one, two);
            //         }
            //         //如果阻止了默认行为则不会触发点击事件
            //         // return false
            //         // event.preventDefault();


            //     });
            //     mapContainer.addEventListener("touchmove", function (event) {
            //         event.preventDefault();
            //         if (!isUpdating) {
            //             isUpdating = true;
            //             requestAnimationFrame(() => {
            //                 const touches = event.touches;
            //                 if (touches.length === 1) {
            //                     // 单指操作
            //                     var x1 = event.changedTouches[0].clientX;
            //                     var y1 = event.changedTouches[0].clientY;
            //                     var x2 = startClientX;
            //                     var y2 = startClientY;
            //                     var dx = x2 - x1;
            //                     var dy = y2 - y1;

            //                     var mercatorLng = startLng + dx / Math.pow(2, map.getZoom() + 8) * 360;
            //                     var mercatorLat = startLat - dy / Math.pow(2, map.getZoom() + 8) * 360 / Math.PI * 2;
            //                     map.panTo(new BMap.Point(mercatorLng, mercatorLat));
            //                 } else if (touches.length > 1) {
            //                     // 双指操作
            //                     const events1 = touches[0];
            //                     const events2 = touches[1];
            //                     const one = { x: events1.pageX, y: events1.pageY };
            //                     const two = { x: events2.pageX, y: events2.pageY };
            //                     const distance = getDistance(one, two);
            //                     const zoom = startZoom + Math.log2(distance / firstDistance);
            //                     map.setZoom(zoom);
            //                 }
            //                 isUpdating = false;
            //             });

            //         }
            //     });
            // }
            // {
            //     let startZoom, firstDistance, startLng, startLat, startClientX, startClientY, startDistance, isUpdating = false;
            //     const mapContainer = document.getElementById("inPicture");

            //     mapContainer.addEventListener("touchstart", function (event) {
            //         const touches = event.touches;
            //         if (touches.length === 1) {
            //             // 单指操作
            //             startClientX = event.changedTouches[0].clientX;
            //             startClientY = event.changedTouches[0].clientY;
            //             startLng = map.getCenter().lng;
            //             startLat = map.getCenter().lat;
            //             startZoom = map.getZoom();
            //         } else if (touches.length > 1) {
            //             // 双指操作
            //             const events1 = touches[0];
            //             const events2 = touches[1];
            //             startZoom = map.getZoom();
            //             const one = { x: events1.pageX, y: events1.pageY };
            //             const two = { x: events2.pageX, y: events2.pageY };
            //             firstDistance = getDistance(one, two);
            //         }
            //         //如果阻止了默认行为则不会触发点击事件
            //         // return false
            //         // event.preventDefault();


            //     });
            //     mapContainer.addEventListener("touchmove", function (event) {
            //         event.preventDefault();
            //         if (!isUpdating) {
            //             isUpdating = true;
            //             requestAnimationFrame(() => {
            //                 const touches = event.touches;
            //                 if (touches.length === 1) {
            //                     // 单指操作
            //                     var x1 = event.changedTouches[0].clientX;
            //                     var y1 = event.changedTouches[0].clientY;
            //                     var x2 = startClientX;
            //                     var y2 = startClientY;
            //                     var dx = x2 - x1;
            //                     var dy = y2 - y1;

            //                     var mercatorLng = startLng + dx / Math.pow(2, map.getZoom() + 8) * 360;
            //                     var mercatorLat = startLat - dy / Math.pow(2, map.getZoom() + 8) * 360 / Math.PI * 2;
            //                     map.panTo(new BMap.Point(mercatorLng, mercatorLat));
            //                 } else if (touches.length > 1) {
            //                     // 双指操作
            //                     const events1 = touches[0];
            //                     const events2 = touches[1];
            //                     const one = { x: events1.pageX, y: events1.pageY };
            //                     const two = { x: events2.pageX, y: events2.pageY };
            //                     const distance = getDistance(one, two);
            //                     const zoom = startZoom + Math.log2(distance / firstDistance);
            //                     map.setZoom(zoom);
            //                 }
            //                 isUpdating = false;
            //             });

            //         }
            //     });
            // }

            window.onresize = () => {
                if (this.warnMessage) {
                    this.warnMessage.close()
                }
                this.warnMessage = null
            }
            const style = {
                version: 8,
                sources: {

                },
                layers: [

                ],
            };
            let center = [112.881435, 28.235474]
            this.draw = new draw({
                accessToken:
                    "sk.eyJ1Ijoid2lzZXh1IiwiYSI6ImNsdzA5d2t6cTE0dmIyanBkc2g2eWw3YmoifQ.fyH9y3UQkMLA_wPogog5tg",
                container: document.getElementById("allmap"),
                style: style,

                center,
                // center:[-80.425, 46.437],
                zoom: 16,
                antialias: false, //抗锯齿，通过false关闭提升性能
                doubleClickZoom: false, //双击图层放缩关闭
                projection: "globe", // 球设置
            });
            this.map = this.draw.map;
           
            {

                let smallStyle = JSON.parse(JSON.stringify(style))
                smallStyle.sources = {
                    URL_VECTOR_2000: {
                        tiles: ['https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png'],
                        type: "raster",
                        tileSize: 256,
                    },
                }
                this.picture.map = new mapboxgl.Map({
                    accessToken:
                        "sk.eyJ1Ijoid2lzZXh1IiwiYSI6ImNsdzA5d2t6cTE0dmIyanBkc2g2eWw3YmoifQ.fyH9y3UQkMLA_wPogog5tg",
                    container: document.getElementById("inPicture"),
                    style: smallStyle,
                    center,
                    zoom: 13,
                    antialias: false, //抗锯齿，通过false关闭提升性能
                    doubleClickZoom: false, //双击图层放缩关闭
                })
                // this.picture.map.on('moveend',()=>{
                //     console.log(3941);
                // })

            }
            setInterval(() => {
                this.getPyData()
                //获取火力打击任务
                this.getFire()
            }, 1000)
            setTimeout(() => {
                this.getPyData()
                channel.objects.pythonBridge.noticeGetScoutTaskTypeInfo()
            }, 300)
            this.computerImg(0)
        },

    })


</script>
<style>

</style>